Home >Web Front-end >Vue.js >How to make the Textarea component have 'word count' function in Ant Design Vue
Ant Design Vue The default Textarea component does not have a word count function, but sometimes it is needed. Let me introduce how to make the Textarea component have a "word count" function. I hope it will be helpful to everyone!
Recommend a practical "word count" function: Ant Design Vue
The default Textarea
component does not have a word count function , but this function is very common, so a simple secondary encapsulation was made. In fact, this function is very simple. Without changing the original component, just add a counting text in the lower right corner and use positioning to process it.
Official website address: https://antdv.com/components/input-cn/
The basic usage is as follows:
<a-textarea v-model="desc" placeholder="请输入描述" :auto-size="false" />
$attrs
and v-model
can be found in the previous article Analysis of Encapsulation Principles ( 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>
is also very simple to use, just like the normal textarea
. If you want to enable word count, showWordLimit
and maxLength
must be configured.
<m-textarea v-model="desc" :showWordLimit="true" :maxLength="20" :autoSize="false" placeholder="请输入描述" />
For more programming related knowledge, please visit: Programming Video! !
The above is the detailed content of How to make the Textarea component have 'word count' function in Ant Design Vue. For more information, please follow other related articles on the PHP Chinese website!