Vue-Cleave - 在Vue中运用CleaveJS格式化你的输入内容

2024年2月18日 185次阅读 来源: jrainlau

项目地点：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

Last but not least…

因为援用包和官方的同步，而官方的包依然有一些小bug，所以Vue-Cleave也会因而带有瑕疵，但我会只管实时更新保护，也迎接人人配合保护，一同竖立越发完美的VueJS生态圈。

程度有限，若有发明任何讹夺还请指导一二。我是Jrain，迎接关注我的专栏，不定期分享本身的进修体验，开辟心得，搬运墙外的干货。下次见啦，感谢人人！

    原文作者：jrainlau
    原文地址: https://segmentfault.com/a/1190000005984648
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞