Ant Design Vue で Textarea コンポーネントに「単語カウント」機能を持たせる方法

Ant Design Vue デフォルトの Textarea コンポーネントには単語カウント機能がありませんが、場合によっては必要になることがあります。Textarea コンポーネントに「単語カウント」機能を持たせる方法を紹介します。皆さんの参考になれば幸いです。

実用的な「単語カウント」関数を推奨します: Ant Design Vue デフォルトの Textarea コンポーネントには単語カウント関数がありません。 , しかし、この関数は非常に一般的であるため、単純な二次カプセル化が行われました。実はこの機能は非常にシンプルで、元のコンポーネントを変更することなく、右下隅にカウントテキストを追加し、位置決めを使用して処理するだけです。

デフォルトのテキストエリア

公式 Web サイトのアドレス: https://antdv.com/components/input-cn/

基本的な使用方法は次のとおりです:

<a-textarea v-model="desc" placeholder="请输入描述" :auto-size="false" />

変換された textarea

$attrs と v-model の実装原則については、前の記事「分析」を参照してください。カプセル化の原則 ( https://juejin.cn/post/7003280618473668639#Heading-3)

<template>
  <div>
    // 文本框
    <a-textarea
     
      v-bind="$attrs"
      v-model="$attrs.value"
      @change="onChange"
    />
    // 字数统计
    <span v-if="showWordLimit"
      >{{ textLength }}/<template v-if="$attrs.maxLength"
        >{{ $attrs.maxLength }}</template
      ></span
    >
  </div>
</template>

<script>
  export default {
    props: {
      // 是否展示字数统计
      showWordLimit: {
        type: Boolean,
        default: false,
      },
    },
    // v-model处理
    model: {
      prop: "value",
      event: "change",
    },
    computed: {
      // 长度控制
      textLength() {
        return (this.$attrs.value || "").length;
      },
    },
    methods: {
      onChange(e) {
        // v-model 回调函数
        this.$emit("change", e.target.value);
      },
    },
  };
</script>

<style scoped>
  .textarea-wrapper {
    position: relative;
    display: block;

    .m-textarea {
      padding: 8px 12px;
      height: 100%;
    }

    .m-count {
      color: #808080;
      background: #fff;
      position: absolute;
      font-size: 12px;
      bottom: 8px;
      right: 12px;
    }
  }
</style>

も、通常の textarea と同様に、非常に簡単に使用できます。ワードカウントを有効にしたい場合は、showWordLimit と maxLength を設定する必要があります。

<m-textarea
  v-model="desc"
  :showWordLimit="true"
  :maxLength="20"
  :autoSize="false"
  placeholder="请输入描述"
/>

プログラミング関連の知識については、プログラミング ビデオをご覧ください。 ！

以上がAnt Design Vue で Textarea コンポーネントに「単語カウント」機能を持たせる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。