Ant Design Vue 預設的 Textarea 元件是沒有字數統計功能的,但有時有需要,以下跟大家介紹一下怎麼讓Textarea元件有「字數統計」功能,希望對大家有幫助!
推薦一個實用的「字數統計」功能: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
都要設定才行。
<m-textarea v-model="desc" :showWordLimit="true" :maxLength="20" :autoSize="false" placeholder="请输入描述" />
更多程式相關知識,請造訪:程式設計影片! !
以上是Ant Design Vue中如何讓Textarea元件有「字數統計」功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!