XTextarea
安装
局部注册
全局注册
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 |
相关 issue
- #3280 fix: texearea newlines
- #2522 XTextarea组件可以加个disable属性吗?
- #2186 x-teatarea能否实现图文混排?给点建议?
- #924 希望XTextarea可以设置title
- #630 x-textarea 在ios9+ 不能输入,点击无光标出现
贡献者
该组件(包含文档)迭代次数 29,贡献人数 8
松松Estelle00airyland万刚zss007Plortinusgreedyinglinhaobin
发布日志
- v2.8.0 [feature] 添加属性 disabled #2522
- v2.5.1 [feature] 添加方法 updateAutosize 在存在默认值的情况下手动重置高度
- v2.2.1-rc.6 [enhance] 标签上对齐
- v2.2.1-rc.6 [feature] 支持属性 prop:autosize 自动更新高度
- v2.1.1-rc.12 [enhance] 点击x-textarea的counter时,主动触发focus事件
- v2.1.1-rc.11 [feature] 支持 on-focus on-blur 事件 #1082 @zeusLeeJh
- v2.1.1-rc.8 [feature] 支持title属性