XTextarea 组件使用教程
优质
小牛编辑
142浏览
2023-12-01
安装
import { XTextarea } from 'vux'
export default {
components: {
XTextarea
}
}// 在入口文件全局引入
import Vue from 'vue'
import { XTextarea } from 'vux'
Vue.component('x-textarea', XTextarea)
<group>
<x-textarea title="title" v-model="value"></x-textarea>
</group>
x-textarea只能在Group中使用
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| title | string | label文字 | v2.1.1-rc.8 | |
| inline-desc | string | 位于标题下的描述文字 | v2.1.1-rc.8 | |
| show-counter | boolean | true | 是否显示计数 | -- |
| max | number | 0 | 最大长度限制 | -- |
| value | string | 表单值, 使用v-model绑定 | -- | |
| name | string | 表单名字 | -- | |
| placeholder | string | 没有值时的提示文字 | -- | |
| rows | number | 3 | textarea 标准属性 rows | -- |
| cols | number | 30 | textarea 标签属性 cols | -- |
| height | number | 0 | 高度 | -- |
| readonly | boolean | false | textarea 标签属性 readonly | -- |
| disabled | boolean | false | textarea 标签属性 disabled | -- |
| autosize | boolean | false | 是否根据内容自动设置高度 | v2.2.1-rc.6 |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-change | (value) | 表单值变化时触发 | -- |
| @on-focus | -- | focus 事件 | v2.1.1-rc.11 |
| @on-blur | -- | blur 事件 | v2.1.1-rc.11 |
插槽
| 名字 | 说明 | 版本要求 |
| label | 用于自定义label(即 title)部分内容，比如使用icon | v2.1.1-rc.8 |
| restricted-label | 用于自定义label部分，和slot=label不同的是，该slot宽度受到父组件group的限制 | v2.1.1-rc.8 |
方法
| 名字 | 参数 | 说明 | 版本要求 |
| updateAutosize | 重置 autosize 高度，如果绑定值不为空，需要调用该函数进行高度重置 | v2.5.1 |