Bagaimana untuk menjadikan komponen Textarea mempunyai fungsi 'bilangan perkataan' dalam Ant Design Vue

Komponen Textarea lalai bagi Ant Design Vue tidak mempunyai fungsi pengiraan perkataan, tetapi kadangkala ia diperlukan. Biar saya memperkenalkan cara untuk menjadikan komponen Textarea mempunyai fungsi "bilangan perkataan". !

Cadangkan fungsi "bilangan perkataan" yang praktikal: Ant Design Vue Komponen lalai Textarea tidak mempunyai fungsi kiraan perkataan, tetapi fungsi ini sangat biasa membuat enkapsulasi sekunder yang mudah. Sebenarnya, fungsi ini sangat mudah Tanpa menukar komponen asal, cuma tambah teks pengiraan di sudut kanan bawah dan gunakan kedudukan untuk memprosesnya.

Kawasan teks lalai

Alamat tapak web rasmi: https://antdv.com/components/input-cn/

Penggunaan asas adalah seperti berikut:

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

Kawasan teks yang diubah

$attrs dan v-model prinsip pelaksanaan boleh didapati dalam artikel sebelumnya Analisis Prinsip Enkapsulasi (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>

juga sangat mudah digunakan, sama seperti biasa textarea. Jika anda ingin mendayakan kiraan perkataan, kedua-dua showWordLimit dan maxLength mesti dikonfigurasikan.

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

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimana untuk menjadikan komponen Textarea mempunyai fungsi 'bilangan perkataan' dalam Ant Design Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!