Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to make Textarea component have word count function in Ant Design Vue". In daily operation, I believe that many people have doubts about how to make Textarea component have word count function in Ant Design Vue. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "how to make Textarea component have word count function in Ant Design Vue". Next, please follow the editor to study!

Recommend a practical "word count" function: the default Textarea component of Ant Design Vue does not have word count function, but this function is very common, so it makes a simple secondary encapsulation. In fact, this function is very simple, that is, without changing the original component, add a count text in the lower right corner and use the positioning to deal with it.

Default textarea

Official website address: https://antdv.com/components/input-cn/

The basic usage is as follows:

Modified textarea / / text box / / word count {{textLength}} / {{$attrs.maxLength}} export default {props: {/ / whether to display word count showWordLimit: {type: Boolean, default: false,},}, / / v-model handles model: {prop: "value", event: "change" }, computed: {/ / length control textLength () {return (this.$attrs.value | | ") .length },}, methods: {onChange (e) {/ / v-model callback function this.$emit ("change", e.target.value);},},}; .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;}}

It is also easy to use, just like a normal textarea. To enable word count, both showWordLimit and maxLength must be configured.

At this point, the study on "how to make Textarea components have word count function in Ant Design Vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.