如何在Vue中使用CleaveJS格式化你的輸入內(nèi)容
What's CleaveJS?
CleaveJS 是最近github上的一個(gè)熱門項(xiàng)目,在短短的一個(gè)多月中star數(shù)達(dá)到了2500+,且保持著強(qiáng)勁的上升勢頭。它的主要目的是
Format input text content when you are typing 格式化你的輸入內(nèi)容
可以查看官方的在線DEMO進(jìn)行體驗(yàn)。
Vue-Cleave
官方的CleaveJS只提供了 原生JS
和 ReactJS
版本的,看樣子也準(zhǔn)備出 AngularJS
版的了。但是當(dāng)我把 VueJS
版本的pullrequest過去之后,卻得到了這么一條答復(fù):
Thanks for playing cleave with vue.js. Vue.js is an amazing framework but for now, we will just focus on what we can handle.
So we will not add this support in the original repo, will close this, cheers.
看來只好自己獨(dú)立發(fā)布,為VueJS社區(qū)作貢獻(xiàn)了……
Usage
直接引用項(xiàng)目 的例子作為展示。 首先建立一個(gè)父組件,命名為 App.vue ,其代碼如下:
<!-- App.vue --> <template> <Cleave :options='cleaveOptions' v-model='formatedValue'></Cleave> </template> <script> import Cleave from './components/cleave.vue' export default { data() { return { formatedValue: '', cleaveOptions: { numeral: true, numeralDecimalScale: 4 } } }, watch: { 'formatedValue': (val) => { console.log(val) } }, components: { Cleave } } </script>
然后呢? 沒有了。
使用方式非常簡單,只需要把 cleave.vue 組件import進(jìn)來進(jìn)行引用,然后通過動態(tài)props的方式在父組件 App.vue 里面把寫好的自定義 cleaveOptions 傳到 <Cleave/> 里面就行了。我們可以把 <Cleave/> 當(dāng)作一個(gè)普通的 <input/> 元素直接進(jìn)行使用。
對于自定義的 cleaveOptions ,其設(shè)置的內(nèi)容和 官方文檔 是相同的,直接照著設(shè)置即可。
PS:對于格式化 電話號碼 的問題,需要進(jìn)入到 cleave.vue 文件,手動引入對應(yīng)國家的addon包:
require('../lib/addons/phone-type-formatter.{country}')
License
Vue-Cleave is licensed under the Apache License Version 2.0
Cleave.js is included under its Apache License Version 2.0
Google libphonenumber is included under itsApache License Version 2.0
Last but not least...
由于引用包和官方的同步,而官方的包仍然有一些小bug,所以 Vue-Cleave 也會因此帶有瑕疵,但我會盡量及時(shí)更新維護(hù),也歡迎大家共同維護(hù),一起建立更加完善的VueJS生態(tài)圈。
項(xiàng)目地址:https://github.com/jrainlau/vue-cleave
水平有限,如有發(fā)現(xiàn)任何錯(cuò)漏還請指點(diǎn)一二。我是Jrain,歡迎關(guān)注我的專欄,不定期分享自己的學(xué)習(xí)體驗(yàn),開發(fā)心得,搬運(yùn)墻外的干貨。下次見啦,謝謝大家!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue關(guān)閉瀏覽器退出登錄的實(shí)現(xiàn)示例
本文主要介紹了vue關(guān)閉瀏覽器退出登錄,一般都是根據(jù)根據(jù)beforeunload和unload這兩個(gè)事件執(zhí)行的。本文就詳細(xì)的介紹一下如何實(shí)現(xiàn),感興趣的可以了解一下2021-12-12在Vue項(xiàng)目中引入騰訊驗(yàn)證碼服務(wù)的教程
這篇文章主要介紹了在Vue項(xiàng)目中引入騰訊驗(yàn)證碼服務(wù)的教程,需要的朋友可以參考下2018-04-04基于Vue+Webpack拆分路由文件實(shí)現(xiàn)管理
這篇文章主要介紹了基于Vue+Webpack拆分路由文件實(shí)現(xiàn)管理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11vue3實(shí)現(xiàn)多個(gè)表格同時(shí)滾動并固定表頭
這篇文章主要給大家介紹了vue3中多個(gè)表格怎么同時(shí)滾動并且固定表頭,文中通過代碼示例給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案
這篇文章主要介紹了Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10axios全局注冊,設(shè)置token,以及全局設(shè)置url請求網(wǎng)段的方法
今天小編就為大家分享一篇axios全局注冊,設(shè)置token,以及全局設(shè)置url請求網(wǎng)段的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09