1# input 2 3交互式组件,包括单选框,多选框,按钮。 4 5> **说明:** 6> 7> 该组件从从API version 4 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12不支持。 13 14 15## 属性 16 17| 名称 | 类型 | 默认值 | 必填 | 描述 | 18| -------- | -------- | -------- | -------- | -------- | 19| type | string | <br/>button | 否 | input组件类型,可选值为button,checkbox,radio。<br/><br/>button,checkbox,radio不支持动态修改。可选值定义如下:<br/>- button:定义可点击的按钮;<br/>- checkbox:定义多选框;<br/>- radio:定义单选按钮,允许在多个拥有相同name值的选项中选中其中一个; | 20| checked | boolean | false | 否 | 当前组件是否选中,仅type为checkbox和radio生效。 | 21| name | string | - | 否 | input组件的名称。 | 22| value | string | - | 否 | input组件的value值,当类型为radio时必填且相同name值的选项该值唯一。 | 23| id | string | - | 否 | 组件的唯一标识。 | 24| style | string | - | 否 | 组件的样式声明。 | 25| class | string | - | 否 | 组件的样式类,用于引用样式表。 | 26| ref | string | - | 否 | 用来指定指向子元素的引用信息,该引用将注册到父组件的$refs 属性对象上。 | 27 28 29## 事件 30 31- 当input类型为checkbox、radio时,支持如下事件: 32 | 名称 | 参数 | 描述 | 33 | -------- | -------- | -------- | 34 | change | { checked:true \| false } | checkbox多选框或radio单选框的checked状态发生变化时触发该事件。 | 35 | click | - | 点击动作触发该事件。 | 36 | longpress | - | 长按动作触发该事件。 | 37 | swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | 组件上快速滑动后触发。 | 38 39- 当input类型为button时,支持如下事件: 40 | 名称 | 参数 | 描述 | 41 | -------- | -------- | -------- | 42 | click | - | 点击动作触发该事件。 | 43 | longpress | - | 长按动作触发该事件。 | 44 | swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | 组件上快速滑动后触发。 | 45 46 47## 样式 48 49| 名称 | 类型 | 默认值 | 必填 | 描述 | 50| -------- | -------- | -------- | -------- | -------- | 51| color | <color> | \#ffffff | 否 | 按钮的文本颜色。 | 52| font-size | <length> | 30px | 否 | 按钮的文本尺寸。 | 53| width | <length> | - | 否 | type为button时,默认值为100px。 | 54| height | <length> | - | 否 | type为button时,默认值为50px。 | 55| font-family | string | SourceHanSansSC-Regular | 否 | 字体。目前仅支持SourceHanSansSC-Regular 字体。 | 56| padding | <length> | 0 | 否 | 使用简写属性设置所有的内边距属性。<br/> 该属性可以有1到4个值:<br/>- 指定一个值时,该值指定四个边的内边距。<br/>- 指定两个值时,第一个值指定上下两边的内边距,第二个指定左右两边的内边距。<br/>- 指定三个值时,第一个指定上边的内边距,第二个指定左右两边的内边距,第三个指定下边的内边距。<br/>- 指定四个值时分别为上、右、下、左边的内边距(顺时针顺序)。 | 57| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | 58| margin | <length> \| <percentage><sup>5+</sup> | 0 | 否 | 使用简写属性设置所有的外边距属性,该属性可以有1到4个值。<br/>- 只有一个值时,这个值会被指定给全部的四个边。<br/>- 两个值时,第一个值被匹配给上和下,第二个值被匹配给左和右。<br/>- 三个值时,第一个值被匹配给上, 第二个值被匹配给左和右,第三个值被匹配给下。<br/>- 四个值时,会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | 59| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | 否 | 设置左、上、右、下外边距属性。 | 60| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度。 | 61| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色。 | 62| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。 | 63| background-color | <color> | - | 否 | 设置背景颜色。 | 64| display | string | flex | 否 | 确定一个元素所产生的框的类型,可选值为:<br/>- flex:弹性布局。<br/>- none:不渲染此元素。 | 65| [left\|top] | <length> \| <percentage><sup>6+</sup> | - | 否 | left\|top确定元素的偏移位置。<br/>- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。<br/>- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | 66 67## 示例 68 691. type为button 70 71 ```html 72 <!-- xxx.hml --> 73 <div class="div-button"> 74 <input class="button" type="button" value="Input-Button"></input> 75 </div> 76 ``` 77 78 ```css 79 /* xxx.css */ 80 .div-button { 81 flex-direction: column; 82 align-items: center; 83 width: 100%; 84 height: 100%; 85 } 86 .button { 87 margin-top: 30px; 88 width: 280px; 89 } 90 ``` 91 92  93 94 95 962. type为checkbox 97 98 ```html 99 <!-- xxx.hml --> 100 <div class="content"> 101 <input onchange="checkboxOnChange" checked="true" type="checkbox"></input> 102 <text class="text">{{text}}</text> 103 </div> 104 ``` 105 106 ```css 107 /* xxx.css */ 108 .content{ 109 width: 100%; 110 height: 100%; 111 flex-direction: column; 112 align-items: center; 113 justify-content: center; 114 } 115 .text{ 116 font-size: 30px; 117 text-align: center; 118 width: 200px; 119 margin-top: 20px; 120 height: 100px; 121 } 122 ``` 123 124 ```javascript 125 // xxx.js 126 export default { 127 data: { 128 text: "text" 129 }, 130 checkboxOnChange(e) { 131 this.text = e.checked; 132 } 133 } 134 ``` 135 136  137 1383. type为radio 139 140 ```html 141 <!-- xxx.hml --> 142 <div class="container"> 143 <div class="item"> 144 <input type="radio" checked="true" name="radioSample" value="radio1" onchange="onRadioChange"></input> 145 <text class="text">radio1</text> 146 </div> 147 <div class="item"> 148 <input type="radio" checked="false" name="radioSample" value="radio2" onchange="onRadioChange"></input> 149 <text class="text">radio2</text> 150 </div> 151 <div class="item"> 152 <input type="radio" checked="false" name="radioSample" value="radio3" onchange="onRadioChange"></input> 153 <text class="text">radio3</text> 154 </div> 155 </div> 156 ``` 157 158 ```css 159 /* xxx.css */ 160 .container { 161 width: 100%; 162 height: 100%; 163 justify-content: center; 164 align-items: center; 165 flex-direction: column; 166 } 167 .item { 168 width: 50%; 169 height: 30%; 170 justify-content: center; 171 } 172 .text { 173 margin-top: 25%; 174 font-size: 30px; 175 text-align: center; 176 width: 200px; 177 height: 100px; 178 } 179 ``` 180 181 