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

Jrain發表於2018-12-13
VueJS

寫於 2016.07.16

專案地址：github.com/jrainlau/vu…

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

Last but not least...

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

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

相關文章