項目地址：https://github.com/jrainlau/vue-cleave

What's CleaveJS?

CleaveJS是最近github上的一個熱門項目，在短短的一個多月中star數(shù)達到了2500+，且保持著強勁的上升勢頭。它的主要目的是

Format input text content when you are typing
格式化你的輸入內(nèi)容

可以查看官方的在線DEMO進行體驗。

Vue-Cleave

官方的CleaveJS只提供了原生JS和ReactJS版本的，看樣子也準備出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.

看來只好自己獨立發(fā)布，為VueJS社區(qū)作貢獻了……

Usage

直接引用項目的例子作為展示。
首先建立一個父組件，命名為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進來進行引用，然后通過動態(tài)props的方式在父組件App.vue里面把寫好的自定義cleaveOptions傳到<Cleave/>里面就行了。我們可以把<Cleave/>當(dāng)作一個普通的<input/>元素直接進行使用。

對于自定義的cleaveOptions，其設(shè)置的內(nèi)容和官方文檔是相同的，直接照著設(shè)置即可。

PS：對于格式化電話號碼的問題，需要進入到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 its Apache License Version 2.0

Last but not least...

由于引用包和官方的同步，而官方的包仍然有一些小bug，所以Vue-Cleave也會因此帶有瑕疵，但我會盡量及時更新維護，也歡迎大家共同維護，一起建立更加完善的VueJS生態(tài)圈。

水平有限，如有發(fā)現(xiàn)任何錯漏還請指點一二。我是Jrain，歡迎關(guān)注我的專欄，不定期分享自己的學(xué)習(xí)體驗，開發(fā)心得，搬運墻外的干貨。下次見啦，謝謝大家！

總結(jié)

以上是生活随笔為你收集整理的Vue-Cleave - 在Vue中使用CleaveJS格式化你的输入内容的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。