您好,登錄后才能下訂單哦!
這篇文章主要介紹“Ant Design Vue中怎么讓Textarea組件有字?jǐn)?shù)統(tǒng)計(jì)功能”,在日常操作中,相信很多人在Ant Design Vue中怎么讓Textarea組件有字?jǐn)?shù)統(tǒng)計(jì)功能問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”Ant Design Vue中怎么讓Textarea組件有字?jǐn)?shù)統(tǒng)計(jì)功能”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
推薦一個實(shí)用的“字?jǐn)?shù)統(tǒng)計(jì)”功能:Ant Design Vue
默認(rèn)的 Textarea
組件是沒有字?jǐn)?shù)統(tǒng)計(jì)功能的,但這個功能又是很常見的,所以就做了一個簡單的二次封裝。其實(shí)這個功能很簡單,就是在不改變原組件的情況下,右下角加上一個計(jì)數(shù)文本,用定位處理一下就行。
官網(wǎng)地址:https://antdv.com/components/input-cn/
基本使用如下所示:
<a-textarea v-model="desc" placeholder="請輸入描述" :auto-size="false" />
<template> <div> // 文本框 <a-textarea v-bind="$attrs" v-model="$attrs.value" @change="onChange" /> // 字?jǐn)?shù)統(tǒng)計(jì) <span v-if="showWordLimit" >{{ textLength }}/<template v-if="$attrs.maxLength" >{{ $attrs.maxLength }}</template ></span > </div> </template> <script> export default { props: { // 是否展示字?jǐn)?shù)統(tǒng)計(jì) showWordLimit: { type: Boolean, default: false, }, }, // v-model處理 model: { prop: "value", event: "change", }, computed: { // 長度控制 textLength() { return (this.$attrs.value || "").length; }, }, methods: { onChange(e) { // v-model 回調(diào)函數(shù) 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
一樣就行。如果要開啟字?jǐn)?shù)統(tǒng)計(jì),showWordLimit
和 maxLength
都要配置才行。
<m-textarea v-model="desc" :showWordLimit="true" :maxLength="20" :autoSize="false" placeholder="請輸入描述" />
到此,關(guān)于“Ant Design Vue中怎么讓Textarea組件有字?jǐn)?shù)統(tǒng)計(jì)功能”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。