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
组件是没有字数统计功能的,但这个功能又是很常见的,所以就做了一个简单的二次封装。其实这个功能很简单,就是在不改变原组件的情况下,右下角加上一个计数文本,用定位处理一下就行。
官网地址: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
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)
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!