How to make the Textarea component have 'word count' function in Ant Design Vue

Ant Design Vue The default Textarea component does not have a word count function, but sometimes it is needed. Let me introduce how to make the Textarea component have a "word count" function. I hope it will be helpful to everyone!

Recommend a practical "word count" function: Ant Design Vue The default Textarea component does not have a word count function , but this function is very common, so a simple secondary encapsulation was made. In fact, this function is very simple. Without changing the original component, just add a counting text in the lower right corner and use positioning to process it.

Default textarea

Official website address: https://antdv.com/components/input-cn/

The basic usage is as follows:

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

The implemented principles of the transformed textarea

$attrs and v-model can be found in the previous article Analysis of Encapsulation Principles ( 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>

is also very simple to use, just like the normal textarea. If you want to enable word count, showWordLimit and maxLength must be configured.

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

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of How to make the Textarea component have 'word count' function in Ant Design Vue. For more information, please follow other related articles on the PHP Chinese website!