如何在Vue中使用CleaveJS格式化你的輸入內(nèi)容

What's CleaveJS?

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

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>

然后呢？ 沒有了。

使用方式非常簡(jiǎn)單，只需要把 cleave.vue 組件import進(jìn)來進(jìn)行引用，然后通過動(dòng)態(tài)props的方式在父組件 App.vue 里面把寫好的自定義 cleaveOptions 傳到 <Cleave/> 里面就行了。我們可以把 <Cleave/> 當(dāng)作一個(gè)普通的 <input/> 元素直接進(jìn)行使用。

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

PS：對(duì)于格式化 電話號(hào)碼 的問題，需要進(jìn)入到 cleave.vue 文件，手動(dòng)引入對(duì)應(yīng)國(guó)家的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 也會(huì)因此帶有瑕疵，但我會(huì)盡量及時(shí)更新維護(hù)，也歡迎大家共同維護(hù)，一起建立更加完善的VueJS生態(tài)圈。

項(xiàng)目地址：https://github.com/jrainlau/vue-cleave

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。