Textarea 文本域

优质

小牛编辑

130浏览

2023-12-01

import { Textarea } from 'feui';
components: {
  [Textarea.name]: Textarea
},
data() {
  return {
    placeholder: "占位符",
    title: "标题"
  };
},

代码演示

基础用法

<fe-group>
  <fe-textarea :max="20" :placeholder="placeholder" 
    @on-focus="onEvent('focus')" @on-blur="onEvent('blur')">
  </fe-textarea>
</fe-group>

和input一起使用

<fe-group title="和input一起使用">
  <fe-input :placeholder="title"></fe-input>
  <fe-textarea :max="200" name="description" 
    :placeholder="placeholder">
  </fe-textarea>
</fe-group>

不显示计数器

<fe-group title="不显示计数器">
  <fe-textarea :max="200" name="detail" :placeholder="placeholder" 
    :show-counter="false">
  </fe-textarea>
</fe-group>

自动高度

<fe-group title="自动高度">
  <fe-textarea :placeholder="placeholder" :show-counter="false" 
    :rows="1" autosize>
  </fe-textarea>
  <fe-textarea :title="title" :placeholder="placeholder" 
    :show-counter="false" :rows="1" autosize>
  </fe-textarea>
</fe-group>

设定固定高度

<fe-group title="设置高度为200像素">
  <fe-textarea :title="title" :max="200" :placeholder="placeholder" 
    :show-counter="false" :height="200" :rows="8" :cols="30">
  </fe-textarea>
</fe-group>

API

参数	说明	类型	默认值	可选值
value	表单值, 使用v-model绑定	`String`	-	-
title	label文字	`String`	-	-
inline-desc	位于标题下的描述文字	`String`	-	-
show-counter	是否显示计数	`Boolean`	`false`	`false`,`true`
max	最大长度限制	`Number`	`0`	-
name	表单名字	`String`	-	-
placeholder	没有值时的提示文字	`String`	-	-
rows	textarea 标准属性`rows`	`Number`	`3`	-
cols	textarea 标准属性`cols`	`Number`	`30`	-
height	高度	`Number`	`0`	-
readonly	textarea 标签属性`readonly`	`Boolean`	`false`	`false`,`true`
autosize	是否根据内容自动设置高度	`Boolean`	`false`	`false`,`true`
-	-	-	-	-

Slots

Slot名	说明	备注
label	用于自定义label(即 title)部分内容	-
restricted-label	用于自定义label部分，和slot=label不同的是，该slot宽度受到父组件group的限制	-
-	-	-

Events

事件名	参数	说明	备注
on-change	`value`	表单值变化时触发	-
on-focus	-	`focus`事件	-
on-blur	-	`blur`事件	-
-	-	-	-

Methods

方法名	参数	说明	备注
updateAutosize	-	重置 autosize 高度	-