当前位置: 首页 > 文档资料 > VUX 中文文档 >

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中使用

属性

名字类型默认值说明版本要求
titlestringlabel文字v2.1.1-rc.8
inline-descstring位于标题下的描述文字v2.1.1-rc.8
show-counterbooleantrue是否显示计数--
maxnumber0最大长度限制--
valuestring表单值, 使用v-model绑定--
namestring表单名字--
placeholderstring没有值时的提示文字--
rowsnumber3textarea 标准属性 rows--
colsnumber30textarea 标签属性 cols--
heightnumber0高度--
readonlybooleanfalsetextarea 标签属性 readonly--
disabledbooleanfalsetextarea 标签属性 disabled--
autosizebooleanfalse是否根据内容自动设置高度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)部分内容,比如使用iconv2.1.1-rc.8
restricted-label用于自定义label部分,和slot=label不同的是,该slot宽度受到父组件group的限制v2.1.1-rc.8

方法

名字参数说明版本要求
updateAutosize重置 autosize 高度,如果绑定值不为空,需要调用该函数进行高度重置v2.5.1