如何在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 相关文章推荐
可以将word转成html的js代码
Apr 11 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
js实现自定义进度条效果
Mar 15 Javascript
简单实现js拖拽效果
Jul 25 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
Vue实现菜单切换功能
Nov 08 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
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
jquery实现居中弹出层代码
2010/08/25 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
python计算导数并绘图的实例
2020/02/29 Python
python实现AdaBoost算法的示例
2020/10/03 Python
python excel多行合并的方法
2020/12/09 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
耐克中国官方商城:Nike中国
2018/10/18 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
武当山导游词
2015/02/03 职场文书
联谊活动总结范文
2015/05/09 职场文书
安全守法证明
2015/06/23 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL
MySQL的存储过程和相关函数
2022/04/26 MySQL