vue3-auto-variable-height-textarea

vue3用の内容に応じてサイズが可変するtextareaコンポーネント

ロジックは以下の記事を参考にして、typescriptで実装

参考: https://qiita.com/tsmd/items/fce7bf1f65f03239eef0

インストール

npm i vue3-auto-variable-height-textarea

使い方

deepセレクタを使用することで、好きなcssを当てられます。

auto-variable-height-textareaクラスでcss変数を定義しているので、上書きして使用することをお勧めします。

<script setup lang="ts">
import { ref } from 'vue'
import { AutoVariableHeightTextarea } from 'vue3-auto-variable-height-textarea'
import 'vue3-auto-variable-height-textarea/dist/index.css'

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

<template>
  <div class="parent">
    <AutoVariableHeightTextarea v-model="text" placeholder="入力してください" disabled />
  </div>
</template>

<style scoped>
.parent:deep(.auto-variable-height-textarea) {
  /* --border-radius: ; */
  /* --border-width: ; */
  /* --border-style: ; */
  /* --border-color: ; */
  /* --disabled-border-color: ; */

  /* --outline-width: ; */
  /* --outline-style: ; */
  /* --outline-color: ; */
  /* --outline-offset: ; */

  /* --font-size: ; */
  /* --line-height: ; */
  /* --color: ; */
  /* --disabled-color: ; */

  /* --background-color: ; */
  /* --disabled-background-color: ; */

  /* --padding: ; */
  /* --min-height: ; */
  /* --max-height: ; */
}
</style>

props

• modelValue: textareaのv-modelとして渡す値

なお、disabledやplaceholderなどのフォールスルー属性はtextareaタグに付与されます。

以下はコンポーネントのtemplateの概要

<template>
  <div class="auto-variable-height-textarea">
    <div class="auto-variable-height-textarea__dummy"></div>
    <textarea v-bind="attrs" class="auto-variable-height-textarea__genuine"></textarea>
  </div>
</template>

emits

• update:modelValue:textareaのv-modelへ更新値を返却する
• change: textareaのchangeイベントを返却する