如何在Vue中使用CleaveJS格式化你的輸入內容

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 itsApache License Version 2.0

Last but not least...

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

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。