欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2018年12月14日 08:27:28   作者:Jrain  
這篇文章主要介紹了如何在Vue中使用CleaveJS格式化你的輸入內(nèi)容,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

What's CleaveJS?

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

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>

然后呢? 沒有了。

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

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

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

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

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

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue跨域請求問題解決方案過程解析

    Vue跨域請求問題解決方案過程解析

    這篇文章主要介紹了Vue跨域請求問題解決方案過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-08-08
  • vue關(guān)閉瀏覽器退出登錄的實(shí)現(xiàn)示例

    vue關(guān)閉瀏覽器退出登錄的實(shí)現(xiàn)示例

    本文主要介紹了vue關(guān)閉瀏覽器退出登錄,一般都是根據(jù)根據(jù)beforeunload和unload這兩個(gè)事件執(zhí)行的。本文就詳細(xì)的介紹一下如何實(shí)現(xiàn),感興趣的可以了解一下
    2021-12-12
  • 在Vue項(xiàng)目中引入騰訊驗(yàn)證碼服務(wù)的教程

    在Vue項(xiàng)目中引入騰訊驗(yàn)證碼服務(wù)的教程

    這篇文章主要介紹了在Vue項(xiàng)目中引入騰訊驗(yàn)證碼服務(wù)的教程,需要的朋友可以參考下
    2018-04-04
  • 淺談element的$notify注意點(diǎn)

    淺談element的$notify注意點(diǎn)

    本文主要介紹了element的$notify注意點(diǎn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • 基于Vue+Webpack拆分路由文件實(shí)現(xiàn)管理

    基于Vue+Webpack拆分路由文件實(shí)現(xiàn)管理

    這篇文章主要介紹了基于Vue+Webpack拆分路由文件實(shí)現(xiàn)管理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-11-11
  • vue3實(shí)現(xiàn)多個(gè)表格同時(shí)滾動并固定表頭

    vue3實(shí)現(xiàn)多個(gè)表格同時(shí)滾動并固定表頭

    這篇文章主要給大家介紹了vue3中多個(gè)表格怎么同時(shí)滾動并且固定表頭,文中通過代碼示例給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
    2024-02-02
  • Vue中Mustache插值語法與v-bind指令詳解

    Vue中Mustache插值語法與v-bind指令詳解

    在Vue中通過Mustache語法(雙大括號)將data中的文本數(shù)據(jù)插入到HTML中,下面這篇文章主要給大家介紹了關(guān)于Vue中Mustache插值語法與v-bind指令的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案

    Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案

    這篇文章主要介紹了Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue?仿QQ左滑刪除組件功能

    Vue?仿QQ左滑刪除組件功能

    前幾天朋友在做vue項(xiàng)目開發(fā)時(shí),有人反映?IOS?上面的滑動點(diǎn)擊有點(diǎn)問題,讓我們來幫忙解決,于是我就重寫了代碼,下面把vue仿qq左滑刪除組件功能分享到腳本之家平臺,需要的朋友參考下吧
    2018-03-03
  • axios全局注冊,設(shè)置token,以及全局設(shè)置url請求網(wǎng)段的方法

    axios全局注冊,設(shè)置token,以及全局設(shè)置url請求網(wǎng)段的方法

    今天小編就為大家分享一篇axios全局注冊,設(shè)置token,以及全局設(shè)置url請求網(wǎng)段的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09

最新評論