Appearance

目录

<input> ​

<input>是单行文本输入组件

WARNING

<input>不支持嵌套子组件

属性 ​

属性名类型默认值说明
valueString""输入的文本内容
placeholderString""占位提示文本
focusedBooleanfalse是否处于激活状态
typeString'default键盘可输入的字符类型
枚举如下：
default 系统默认
number 数字类型
tel 手机号
email 邮件
password 密码
maxLengthNumber0(无限制)最大输入长度
returnKeyTypeString"done"返回按钮类型
枚举如下：
done完成
go前往
next下一项
search搜索
send发送

样式 ​

通用样式，可参考样式介绍

专属样式

属性名类型默认值说明示例
placeholder-colorString系统默认占位提示文本颜色placeholder-color: '#999999'
cursor-colorString系统默认光标颜色cursor-color: '#007AFF'
placeholder-font-sizeNumber | String16占位字体大小placeholder-font-size: 16 | '48px'

事件 ​


input ​

当输入状态变化时，不断触发

@param(value, state) 当前输入框的文本

change ​

文本变化时触发

@param(value) 当前输入框的文本

focus ​

获取焦点时触发

@param(value) 当前输入框的文本

blur ​

失去焦点时触发

@param(value) 当前输入框的文本

confirm ​

点击完成时触发

@param(value) 当前输入框的文本

示例 ​


Tenon Vue ​

html
<!-- App.vue -->
<template>
  <input v-model="title" @change="handleChange"/>
</template>
<script>
  export default{
    data(){
      return {
        title: 'Init Value'
      }
    }
    methods: {
      handleChange(value){
        Toast.show('Input Change Value:', value)
      }
    }
  }
</script>

更多用法，可参考Tenon Vue 官方示例。

Tenon React ​

jsx
import React, {useState} from "react"

import Tenon from "@hummer/tenon-react"

function InputApp() {
  let [value, setValue] = useState('Init Value')

  return (
    <input className="input" value={value} onChange={(value) => setValue(value)}/>
  );
}

Tenon.render(<InputApp />)

更多用法，可参考Tenon React 官方示例。