Vue DevUI
主题

Textarea 多行文本框

文本输入区域。

何时使用

需要手动输入文字，并且文字内容较多时使用。

基本用法

Default
Disabled
Error
<template>
  <div class="mb-0">Default</div>
  <d-textarea class="mb-2" v-model="valueDefault" autofocus id="textArea"></d-textarea>

  <div class="mb-0">Disabled</div>
  <d-textarea class="mb-2" placeholder="我是被禁用状态" disabled></d-textarea>

  <div class="mb-0">Error</div>
  <d-textarea v-model="valueError" placeholder="我是出错状态" error></d-textarea>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const valueDefault = ref('我是默认值');
    const valueError = ref('');
    return {
      valueDefault,
      valueError,
    };
  },
});
</script>

文本框高度控制 

<template>
  <d-textarea v-model="valueHeight" :rows="5" placeholder="文本域高度可通过 rows 属性控制"></d-textarea>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const valueHeight = ref('');
    return {
      valueHeight,
    };
  },
});
</script>

自适应文本框

设置文字输入类型的 autosize 属性使得根据内容自动调整的高度。 你可以给 autosize 提供一个包含有最大和最小高度的对象，让输入框自动调整。

<template>
  <d-textarea class="mb-2" v-model="valueAutoSize1" autosize placeholder="请输入"></d-textarea>
  <d-textarea v-model="valueAutoSize2" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入" resize="both"></d-textarea>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const valueAutoSize1 = ref('');
    const valueAutoSize2 = ref('');
    return {
      valueAutoSize1,
      valueAutoSize2,
    };
  },
});
</script>

调整大小

vertical
horizontal
both
none
inherit
<template>
  <div class="mb-0">vertical</div>
  <d-textarea class="mb-2" placeholder="我可以缩放" resize="vertical"></d-textarea>

  <div class="mb-0">horizontal</div>
  <d-textarea class="mb-2" resize="horizontal" placeholder="请输入"></d-textarea>

  <div class="mb-0">both</div>
  <d-textarea class="mb-2" resize="both" placeholder="请输入"></d-textarea>

  <div class="mb-0">none</div>
  <d-textarea class="mb-2" resize="none" placeholder="请输入"></d-textarea>

  <div class="mb-0">inherit</div>
  <d-textarea class="mb-2" resize="inherit" placeholder="请输入"></d-textarea>
</template>

显示字数

默认
0
显示最大字数
0 / 20
<template>
  <div class="mb-0">默认</div>
  <d-textarea class="mb-2" v-model="valueCount1" show-count placeholder="请输入"></d-textarea>
  <div class="mb-0">显示最大字数</div>
  <d-textarea v-model="valueCount2" show-count maxlength="20" placeholder="请输入"></d-textarea>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const valueCount1 = ref('');
    const valueCount2 = ref('');
    return {
      valueCount1,
      valueCount2,
    };
  },
});
</script>

事件响应

0
<template>
  <d-textarea
    v-model="value1"
    show-count
    :max-length="20"
    placeholder="打开控制台输入文字看看"
    @update:modelValue="onUpdate"
    @change="onChange"
    @focus="onFocus"
    @keydown="onKeydown"
  ></d-textarea>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const onUpdate = (value) => {
      console.log('【d-textarea update value】：', value);
    };
    const onChange = (value) => {
      console.log('【d-textarea change value】：', value);
    };
    const onFocus = (e) => {
      console.log('【d-textarea onFocus】:', e);
    };
    const onKeydown = (e) => {
      console.log('【d-textarea onKeydown:', e);
    };
    const value1 = ref('');
    return {
      onUpdate,
      onChange,
      onFocus,
      onKeydown,
      value1,
    };
  },
};
</script>

Textarea 参数

参数名类型默认值说明跳转 Demo
v-modelstring-可选，文本框绑定值基本用法
placeholderstring-可选，文本框 placeholder基本用法
disabledbooleanfalse可选，文本框是否被禁用基本用法
autofocusbooleanfalse可选，文本框是否自动获得焦点基本用法
errorbooleanfalse可选，文本框是否出现输入错误基本用法
resizeResize'none'可选，文本框是否可调整大小调整大小
show-countbooleanfalse可选，文本框是否是否展示字数显示字数
rowsnumber / string2可选，文本框高度控制文本框高度控制
autosizeboolean / objectfalsetextarea 高度是否自适应。可以接受一个对象，比如: { minRows: 2, maxRows: 6 }自适应文本框

Textarea 事件

事件名回调参数说明跳转 Demo
updateFunction(value: string)文本框内容变化（实时触发）事件响应
focusFunction(event: Event)文本框获得焦点事件响应
blurFunction(event: Event)文本框失去焦点事件响应
changeFunction(value: string)文本框内容变化（失去焦点触发）事件响应
keydownFunction(event: Event)文本框按下键盘事件响应

Textarea 类型定义

Resize 

type Resize = 'none' | 'vertical' | 'horizontal' | 'both' | 'inherit';
Contributors
粤A2-20044005号