如何在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 相关文章推荐
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
jquery 插件学习(一)
Aug 06 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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
附件名前加网站名
2008/03/23 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
php购物车实现方法
2015/01/03 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
vue如何截取字符串
2019/05/06 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
毕业生找工作的自我评价
2013/10/18 职场文书
酒吧创业计划书
2014/01/18 职场文书
小学教学随笔感言
2014/02/26 职场文书
代理人委托书
2014/09/16 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers