支付宝小程序扩展表单 多行输入·MultiLiner
多行输入框，可输入多行内容。
扫码体验
示例代码
{
"defaultTitle": "Multi-liner",
"usingComponents": {
"multi-liner": "mini-ali-ui/es/multi-liner/index"
}
}<view>
<view style="margin-top: 10px;" />
<view class="title">多行输入</view>
<multi-liner data-field="area"
placeholder="字数统计↘"
type="text"
value="{{value}}"
onInput="onInput"
last="{{true}}"
auto-height="{{true}}"
controlled="{{controlled}}"/>
<view style="margin: 10px;" />
</view>Page({
data: {
value: '内容',
controlled: true,
},
onInput(e) {
this.setData({
value: e.detail.value,
});
},
});属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| className | String | '' | 自定义的 class。 |
| inputCls | String | '' | 自定义 input 的 class。 |
| last | Boolean | false | 是否最后一行。 |
| value | String | '' | 初始内容。 |
| name | String | '' | 组件名字，用于表单提交获取数据。 |
| placeholder | String | '' | 占位符。 |
| placeholderStyle | String | '' | 指定 placeholder 的样式。 |
| placeholderClass | String | '' | 指定 placeholder 的样式类。 |
| disabled | Boolean | false | 是否禁用。 |
| maxlength | Number | 140 | 最大长度。 |
| focus | Boolean | false | 获取焦点。 |
| auto-height | Boolean | false | 是否自动增高。 |
| show-count | Boolean | true | 是否渲染字数统计功能（是否删除默认计数器/是否显示字数统计）。 |
| controlled | Boolean | - | 是否为受控组件。为 true 时，value 内容会完全受 setData 控制。 |
| onInput | (e: Object) => void | - | 键盘输入时触发 input 事件。 |
| onConfirm | (e: Object) => void | - | 点击键盘完成时触发。 |
| onFocus | (e: Object) => void | - | 聚焦时触发。 |
| onBlur | (e: Object) => void | - | 失去焦点时触发。 |