如何在Vue中使用CleaveJS格式化你的输入内容


Posted in Javascript onDecember 14, 2018

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,欢迎关注我的专栏,不定期分享自己的学习体验,开发心得,搬运墙外的干货。下次见啦,谢谢大家!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
限制文本框输入N个字符的js代码
May 13 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 #Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 #Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 #Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 #Javascript
javascript对HTML字符转义与反转义
Dec 13 #Javascript
Web安全之XSS攻击与防御小结
Dec 13 #Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 #Javascript
You might like
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
PHP实现八皇后算法
2019/05/06 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
Vue前后端不同端口的实现方法
2018/09/19 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
自荐信的禁忌和要点
2013/10/15 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
品质口号大全
2014/06/17 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
社保委托书怎么写
2014/08/02 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
教导处教学工作总结
2015/08/12 职场文书
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL