input

提供可交互的界面，接收用户的输入，默认为单行

子组件

不支持

属性

支持通用属性

名称	类型	默认值	必填	描述
type	button	checkbox	radio	text
checked	<boolean>	false	否	当前组件的 checked 状态，可触发 checked 伪类，type 为 checkbox 时生效
name	<string>	-	否	input 组件名称
value	<string>	-	否	input 组件的值
placeholder	<string>	-	否	提示文本的内容，type 为 text

样式

支持通用样式

名称	类型	默认值	必填	描述
color	<color>	#000	否	文本颜色
caret-color	<color>	#000	否	光标颜色
font-size	<length>	43.2px	否	文本尺寸
text-decoration	<string>	underline	否	文本下划线，目前只支持 underline
placeholder-color	<color>	#000	否	提示文本的颜色，type 为 text
width	<length>	<percentage>	-	否
height	<length>	<percentage>	-	否

事件

支持通用事件

名称	参数	描述
change	不同 type 参数不同，具体见下方 change 事件参数	input 组件的值、状态发生改变时触发，type 为 button 时无 change 事件
focus	index	获取光标返回的下标值

change 事件参数

| 参数 | text | speak | checkbox | radio | 备注 | | --- | --- | --- | --- | --- | | name | | √ | √ | | | value | √ | √ | √ | | | checked | | √ | | |

方法

名称	参数	描述
setSpan	Object	动态设置文字样式，方法的入参不是必填项 目前只支持设置 color 和 text-decoration
focus	无	type 为 text

setSpan 参数说明如下:

属性	类型	默认值	描述
start	Number	-	指定开始的位置
end	Number	-	指定结束的位置
style	Object	-	设置文字样式 ，不设置样式默认组件本身的样式

示例

<template>
    <div style="flex-direction:column;">
       <input id="input" value="{{value}}" onfocus="focus"></input>
    </div>
    <div onclick="setSpan">设置文字样式</div>
</template>

<script>
  export default {
    data:{
      value:'input'
    },

    //组件获取光标后的回调值，在对应的位置插入值
    focus(index){

       //把输入框的值转为数组
       let data = String(this.value).split('')

       //在对应的位置插入对应的值
       data.splice(index,0,'插入input的值')

       //把转换后的值赋值回去给input组件的value
       this.value = data.join('');
    },

    setSpan(){
       //设置文字样式
       this.$element('input').setSpan({
          start:0,
          end:10,
          style:{
            'text-decoration':'underline',
            'color':'#000'
          }
       });
    }
  }
</script>

示例

修改 checkbox 组件的颜色

<template>
    <div style="flex-direction:column;">
       <input checked="{{checked}}"  color='#a52a2a'  type='checkbox'></input>
    </div>
</template>

<script>
  export default {
     data:{
       checked:true
     }
  }
</script>

示例

修改 radio 组件的颜色

<template>
    <div style="flex-direction:column;">
       <input checked="{{checked}}"  color="#399FFF"  type="radio"> </input>
    </div>
</template>

<script>
  export default {
     data:{
       checked:true
     }
  }
</script>