So stellen Sie sicher, dass die Textarea-Komponente in Ant Design Vue über die Funktion „Wortzählung“ verfügt

Die Standard-Textarea-Komponente von Ant Design Vue verfügt nicht über eine Wortzählfunktion, aber manchmal ist sie erforderlich. Ich hoffe, dass sie für alle hilfreich ist.

Empfehlen Sie eine praktische Funktion zum Zählen von Wörtern: Ant Design Vue Die Standardkomponente Textarea verfügt nicht über eine Funktion zum Zählen von Wörtern, aber diese Funktion ist sehr verbreitet. Also habe ich eine einfache sekundäre Kapselung erstellt. Tatsächlich ist diese Funktion sehr einfach, ohne die ursprüngliche Komponente zu ändern. Fügen Sie einfach einen Zähltext in der unteren rechten Ecke hinzu und verwenden Sie die Positionierung, um ihn zu verarbeiten. 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

Standardtextbereich

Offizielle Website-Adresse: https://antdv.com/components/input-cn/

Grundlegende Verwendung ist wie folgt:

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

Die transformierten Textarea

$attrs- und v-model-Implementierungsprinzipien finden Sie im vorherigen Artikel „Analyse der Kapselungsprinzipien“ (https : //juejin.cn/post/7003280618473668639#heading-3)

rrreee🎜Es ist auch sehr einfach zu verwenden, genau wie ein normaler textarea. Wenn Sie die Wortzählung aktivieren möchten, müssen showWordLimit und maxLength konfiguriert sein. 🎜rrreee🎜🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonSo stellen Sie sicher, dass die Textarea-Komponente in Ant Design Vue über die Funktion „Wortzählung“ verfügt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!