Textarea 文本框

使用指南

用于接受多行文本。

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      不带边框多行文本 适合跟field组合使用
    </p>
    <h3-textarea
      ref="textarea"
      v-model="textareaValue"
      :maxlength="200"
      :border="false"
      count
      placeholder="请输入"
    />
    <br />
    <h3-button @click="setFocus()" type="primary">
      点击获取焦点
    </h3-button>
    <p class="sub-title">
      只读
    </p>
    <h3-textarea v-model="textareaValue2" readonly />
    <p class="sub-title">
      禁止
    </p>
    <h3-textarea v-model="textareaValue2" disabled />
    <p class="sub-title">
      autoSize 可动态设置高度,设置最少显示行数和最多显示行数，超过则滚动
    </p>
    <h3-textarea :rows="2" :autoSize="autoSize" v-model="textareaValue1" />
    <p class="sub-title">
      显示统计数字，需要设置maxlength
    </p>
    <h3-textarea v-model="textareaValue1" :maxlength="2000" count />
  </div>
</template>

<script>
import H3Textarea from '@/components/h3-textarea/';
import H3Button from '@/components/h3-button/';

export default {
  name: 'Textarea',
  components: {
    H3Button,
    H3Textarea,
  },
  data () {
    return {
      autoSize: {
        minRows: 3,
        maxRows: 5,
      },
      textareaValue: '',
      textareaValue2:
        '查看模式查看模式查看模式查看模式查看模式查看模式查看模式查看模式查看模式查看模式查看模式查看模式查看模式查看模式查看模式查看模式查看模式查看模式查看模式查看模式查看模式查看模式查看模式',
      textareaValue1: '请继续输入行数',
    };
  },
  methods: {
    setFocus () {
      this.$refs.textarea.focus();
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  background-color: #fff;
  padding: 0 15px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

旧组件库输入框与field组件过于耦合，因此新组件单独做成一个纯粹的textarea的组件。

若要做迁移请参考

1. 弃用的props：h3style title defaultValue error className labelNumber prefixListCls onChange onBlur onFocus onErrorClick

2. 替换的props：

   • clear => clearable
   • maxLength => maxlength
   • editable => readonly

3. 新增的props：wait border autoSize wrap

4. 弃用原来所有的事件

API

Prop

属性	说明	类型	默认值
value	value，v-model绑定值	string	无
name	textarea 的 name	String	-
placeholder	提示文本	string	''
readonly	是否只读	boolean	false
disabled	是否禁用	boolean	false
wrap	原生的 wrap 属性，可选值为 hard soft	string	soft
rows	显示几行	number	3
clearable	是否可以清除(仅readonly为false,disabled为false才生效)	boolean	true
forceClear	若clearable: ture, 默认focus时才显示, forceClear: true则强制显示	boolean	false
count	是否显示统计	boolean	-
maxlength	输入最大长度	number	-
autoSize	自适应内容高度，如 { minRows: 2, maxRows: 5 }	boolean | object	false

Event

事件名	说明	参数
input	文本改变时触发，v-model绑定事件	value：文本内容
change	文本改变时触发	value：文本内容
focus	文本聚焦触发	evt
blur	文本失焦触发	evt
click	点击文本框触发	evt

Function

• 实例方法

方法名	说明	参数
focus	使搜索栏textarea获取焦点	-
blur	使搜索栏textarea失去焦点	-