Vue-Cleave - 在Vue中使用CleaveJS格式化你的輸入內容

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

What's CleaveJS?

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

Format input text content when you are typing
格式化你的輸入內容

能夠查看官方的在線DEMO進行體驗。

Vue-Cleave

官方的CleaveJS只提供了原生JS和ReactJS版本的，看樣子也準備出AngularJS版的了。可是當我把VueJS版本的pullrequest過去以後，卻獲得了這麼一條答覆：

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.

看來只好本身獨立發佈，爲VueJS社區做貢獻了……

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進來進行引用，而後經過動態props的方式在父組件App.vue裏面把寫好的自定義cleaveOptions傳到<Cleave/>裏面就好了。咱們能夠把<Cleave/>看成一個普通的<input/>元素直接進行使用。

對於自定義的cleaveOptions，其設置的內容和官方文檔是相同的，直接照着設置便可。

PS：對於格式化電話號碼的問題，須要進入到cleave.vue文件，手動引入對應國家的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生態圈。

水平有限，若有發現任何錯漏還請指點一二。我是Jrain，歡迎關注個人專欄，不按期分享本身的學習體驗，開發心得，搬運牆外的乾貨。下次見啦，謝謝你們！