Comment faire en sorte que le composant Textarea ait la fonction "compte de mots" dans Ant Design Vue

Le composant Textarea par défaut d'Ant Design Vue n'a pas de fonction de comptage de mots, mais cela est parfois nécessaire. Laissez-moi vous présenter comment faire en sorte que le composant Textarea ait une fonction de "compte de mots". J'espère que cela sera utile à tout le monde !

Recommander une fonction pratique de "compte de mots": Ant Design Vue Le composant Textarea par défaut n'a pas de fonction de comptage de mots, mais cette fonction est très courante, j'ai donc fait une simple encapsulation secondaire. En fait, cette fonction est très simple. Sans changer le composant d'origine, ajoutez simplement un texte de comptage dans le coin inférieur droit et utilisez le positionnement pour le traiter. Ant Design Vue 默认的 Textarea 组件是没有字数统计功能的，但这个功能又是很常见的，所以就做了一个简单的二次封装。其实这个功能很简单，就是在不改变原组件的情况下，右下角加上一个计数文本，用定位处理一下就行。

默认的 textarea

官网地址：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

Zone de texte par défaut

Adresse officielle du site Web : https://antdv.com/components/input-cn/

L'utilisation de base est la suivante :

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

Les principes d'implémentation de la zone de texte transformée

$attrs et v-model peuvent être trouvés dans l'article précédent Analyse des principes d'encapsulation (https : //juejin.cn/post/7003280618473668639#heading-3)

rrreee🎜Il est également très simple à utiliser, tout comme une textarea normale. Si vous souhaitez activer le nombre de mots, showWordLimit et maxLength doivent être configurés. 🎜rrreee🎜🎜🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!