XTextarea 组件使用教程
优质
小牛编辑
136浏览
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 |