Textarea 文本框

使用指南

用于接受多行文本。

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      多行输入
    </p>
    <h3-textarea
      ref="textarea"
      v-model="textareaValue"
      :maxlength="10"
      :border="true"
      count
      placeholder="请输入"
    />
    <br />
    <h3-textarea v-model="textareaValue2" :maxlength="20" count />

    <p class="sub-title">
      只读
    </p>
    <h3-textarea v-model="textareaValue2" readonly />
    <p class="sub-title">
      禁止
    </p>
    <h3-textarea v-model="textareaValue2" disabled />

    <!-- <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>

与thinking-ui 2.0版组件的区别以及迁移

按照新的单行输入组件规范修改相关样式

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	是否可以清除	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失去焦点	-