Heim > Artikel > Web-Frontend > 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
组件是没有字数统计功能的,但这个功能又是很常见的,所以就做了一个简单的二次封装。其实这个功能很简单,就是在不改变原组件的情况下,右下角加上一个计数文本,用定位处理一下就行。
官网地址:https://antdv.com/components/input-cn/
基本使用如下所示:
<a-textarea v-model="desc" placeholder="请输入描述" :auto-size="false" />
$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
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)
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!