如何在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 相关文章推荐
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 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 skymvc 一款轻量、简单的php
2011/06/28 PHP
laravel安装和配置教程
2014/10/29 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
python使用pil生成缩略图的方法
2015/03/26 Python
python访问类中docstring注释的实现方法
2015/05/04 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
介绍一下gcc特性
2015/10/31 面试题
玄武湖导游词
2015/02/05 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
Java界面编程实现界面跳转
2022/06/16 Java/Android