Textarea 여러 줄 입력창

텍스트를 입력하는 영역이에요.

출처: 문서

본문

언제 사용하나요?

직접 글자를 입력해야 하고 내용이 많을 때 사용해요.

기본 사용법

:::demo

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

:::

입력창 높이 조절

:::demo

<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에 최소·최대 높이를 담은 객체를 넘겨 입력창이 알아서 조절되게 할 수도 있어요.

:::demo

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

:::

크기 조절

:::demo

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

:::

글자 수 표시

:::demo

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

:::

이벤트 응답

:::demo

<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 파라미터

Textarea 이벤트

Textarea 타입 정의

Resize

type Resize = 'none' | 'vertical' | 'horizontal' | 'both' | 'inherit';

더 알아보기 (Learn more)

Textarea로 여러 줄 텍스트를 입력받을 수 있어요. 더 자세한 내용은 공식 문서를 참고하세요.