Maison > interface Web > Voir.js > le corps du texte

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

青灯夜游
Libérer: 2021-12-21 10:47:43
avant
5439 Les gens l'ont consulté

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 !

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

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" />
Copier après la connexion

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

改造后的 textarea

$attrsv-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>
Copier après la connexion

使用也很简单,和正常的 textarea 一样就行。如果要开启字数统计,showWordLimitmaxLength

Zone de texte par défaut

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

Comment faire en sorte que le composant Textarea ait la fonction compte de mots dans Ant Design VueL'utilisation de base est la suivante :

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

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!

Étiquettes associées:
source:juejin.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal