KvcTextarea

複数行のテキスト入力を行うためのテキストエリアコンポーネントです。

ライブデモ

基本的な使い方

<template>
  <kvc-textarea v-model="content" />
</template>

<script setup>
import { ref } from 'vue'

const content = ref('')
</script>

プロパティ

プロパティ	型	デフォルト	説明
modelValue	`string`	`''`	入力値（v-model）
placeholder	`string`	-	プレースホルダーテキスト
readOnly	`boolean`	`false`	読み取り専用モード
disabled	`boolean`	`false`	無効化状態
rows	`number`	`3`	表示行数
maxlength	`number`	-	最大文字数

イベント

イベント名	ペイロード	説明
update:modelValue	`string`	入力値が変更されたときに発火
blur	`FocusEvent`	フォーカスが外れたときに発火
focus	`FocusEvent`	フォーカスが当たったときに発火
input	`Event`	入力時に発火

使用例

基本的な使用

<template>
  <kvc-field label="コメント">
    <kvc-textarea
      v-model="comment"
      placeholder="コメントを入力してください"
      :rows="5"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const comment = ref('')
</script>

最大文字数制限

<template>
  <kvc-field label="説明">
    <kvc-textarea
      v-model="description"
      :maxlength="500"
      :rows="8"
      placeholder="最大500文字まで入力できます"
    />
    <p>{{ description.length }} / 500 文字</p>
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const description = ref('')
</script>

読み取り専用

<template>
  <kvc-field label="内容">
    <kvc-textarea
      v-model="readOnlyContent"
      :read-only="true"
      :rows="6"
    />
  </kvc-field>
</template>

<script setup>
import { ref } from 'vue'

const readOnlyContent = ref('この内容は読み取り専用です。')
</script>

TypeScript サポート

import type { KvcTextareaProps } from '@zygapp/kintone-vue3-component'

const props: KvcTextareaProps = {
  modelValue: '',
  placeholder: 'テキストを入力',
  rows: 5,
  maxlength: 500
}