What's CleaveJS?

創(chuàng)新互聯(lián)公司于2013年開(kāi)始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元夏津做網(wǎng)站,已為上家服務(wù),為夏津各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

CleaveJS 是最近github上的一個(gè)熱門(mén)項(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過(guò)去之后，卻得到了這么一條答復(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.

看來(lái)只好自己獨(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>

然后呢？ 沒(méi)有了。

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

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

PS：對(duì)于格式化 電話號(hào)碼 的問(wèn)題，需要進(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)，開(kāi)發(fā)心得，搬運(yùn)墻外的干貨。下次見(jiàn)啦，謝謝大家！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

名稱欄目：如何在Vue中使用CleaveJS格式化你的輸入內(nèi)容
新聞來(lái)源：http://chinadenli.net/article18/gdoidp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、全網(wǎng)營(yíng)銷推廣、定制開(kāi)發(fā)、微信公眾號(hào)、網(wǎng)站策劃、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)