cleave.js_Cleave.js的Vue.js 2.x组件
cleave.js
切裂分量 (vue-cleave-component)
Vue.js component for cleave.js
对于Vue.js组件cleave.js
特征 (Features)
Reactive
v-model
valueReact性
v-model
值- You can change input value programmatically您可以通过编程方式更改输入值
Reactive options
React选项
- You can change config options dynamically您可以动态更改配置选项
- Component will watch for any changes and redraw itself组件将监视任何更改并重新绘制自身
- You are suggested to modify config via Vue.set建议您通过Vue.set修改配置
Compatible with Bootstrap, Bulma or any other CSS framework
与Bootstrap,Bulma或任何其他CSS框架兼容
Option to disable
raw
mode to get masked value禁用
raw
模式以获取掩码值的选项
安装 (Installation)
# npm
npm install vue-cleave-component --save# Yarn
yarn add vue-cleave-component
用法 (Usage)
<template><div><cleave v-model="cardNumber" :options="options" class="form-control" name="card"></cleave></div>
</template><script>import Cleave from 'vue-cleave-component';export default { data () {return {cardNumber: null, options: {creditCard: true,delimiter: '-',} }},components: {Cleave}}
</script>
作为插件 (As plugin)
import Vue from 'vue';import Cleave from 'vue-cleave-component';Vue.use(Cleave);
This will register a global component <cleave>
这将注册一个全局组件<cleave>
可用道具 (Available props)
The component accepts these props:
该组件接受以下道具:
Attribute | Type | Default | Description |
---|---|---|---|
v-model / value | String / Number / null |
null
|
Set or Get input value (required) |
options | Object |
{}
|
Cleave.js options |
raw | Boolean |
true
|
When set to false ; emits formatted value with format pattern and delimiter
|
type | String |
text
|
Set input type; for eg: tel
|
属性 | 类型 | 默认 | 描述 |
---|---|---|---|
v模型/值 | 字符串/数字/空 |
null
|
设置或获取输入值(必填) |
选项 | 目的 |
{}
|
Cleave.js 选项 |
生的 | 布尔型 |
true
|
设为false ; 发出带有格式模式和定界符的格式化值
|
类型 | 串 |
text
|
设置输入类型; 例如: tel
|
在非模块环境中安装(没有webpack) (Install in non-module environments (without webpack))
Include required files
包括所需文件
<!-- cleave.js -->
<script src="https://unpkg.com/[email protected]/dist/cleave.min.js"></script>
<!-- Vue.js -->
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<!-- Lastly add this package -->
<script src="https://unpkg.com/vue-cleave-component"></script>
Use the component anywhere in your app like this
像这样在应用程序中的任何地方使用组件
<main id="app"> <cleave v-model="card" :options="options"></cleave>
</main>
<script>// Initialize global componentVue.use(VueCleave);new Vue({el: '#app',data: {card: null,options: {creditCard: true,}}, });
</script>
在本地主机上运行示例 (Run examples on your localhost)
Clone this repo
克隆此仓库
You should have node-js >=6.10 and yarn >=1.x pre-installed
您应该预先安装node-js> = 6.10和yarn> = 1.x
Install dependencies
yarn install
安装依赖项
yarn install
Run webpack dev server
yarn start
运行webpack dev服务器
yarn start
This should open the demo page at
http://localhost:9000
in your default web browser这应该在默认的Web浏览器中打开位于
http://localhost:9000
的演示页面。
翻译自: https://vuejsexamples.com/vue-js-2-x-component-for-cleave-js/
cleave.js
cleave.js_Cleave.js的Vue.js 2.x组件相关推荐
- Vue.js(一) Vue.js + element-ui 扫盲
Vue.js(一) Vue.js + element-ui 扫盲 2018年12月09日 20:32:59 vbirdbest 阅读数 7043更多 分类专栏: Vue.js + ElementUI ...
- 关于node.js 和vue.js的安装、卸载、浏览器测试问题?
关于node.js 和vue.js的安装.卸载.浏览器测试问题? 最近忙于深入研究vue.js框架的适用问题,所以顺带也有必要系统的研究一下node.js是怎么一回事?! 闲话不多说,直接上文章链接: ...
- nuxt解决首屏加载慢问题_Nuxt.js超过Vue.js:你什么时候应该使用它,为什么
Nuxt.js是一个建立在Vue.js上的前端框架,它提供了很好的开发特性,比如服务器端渲染.自动生成路由.改进的元标签管理和SEO改进. Nuxt.js 我们的前端团队并没有真正考虑在客户端使用 N ...
- React.js与Vue.js—两种流行框架的深度比较
JavaScript的发展速度比以往任何时候都快,导致前端的发展也是日新月异,现在讨论最多的前端框架--React.js和Vue.js.因此,在React与Vue的比较中,我们来看看这两者之间更深入的 ...
- RAP、Mock.js、Vue.js、Webpack
最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了. 所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口. npm init ...
- 【JS】Vue.js实现简单的ToDoList(一)——前期准备
一.前言 最近开始学习轻量级的mvvm框架Vue.js.就中文文档来说,算是很齐全了.之前本来在学习1.0版本,某日突然打开官网发现已更新为2.0.便把之后的都改为了2.0的语法.ps:如果恰好你是V ...
- vue.js php,vue.js去哪下载
vue.js可以去vue官网下载,其下载链接为"vuejs.org/v2/guide/installation.html",然后用" 本教程操作环境:Windows7系统 ...
- php node.js django,Vue.js和Django搭建前后端分离项目示例详解
本篇文章主要介绍了Django+Vue.js搭建前后端分离项目的示例,具有一定参考价值,有兴趣的可以了解一下 在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录...
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
最新文章
- Redmine+Apache+SVN+Postfix完整配置指南
- 解决Lync Server 2013无法共享演示PPT
- 都在建议你不要直接使用 @Async 注解,为什么?
- Stackoverflow:您从未见过的7个最佳Java答案
- 【TypeScript系列教程11】函数的使用
- NCBI SRA数据预处理
- C# 析构函数(Destructor)和终结器(Finalizer)——托管资源的释放
- 201621123003《Java程序设计》第一周学习总结
- Careercup - Microsoft面试题 - 5752271719628800
- webpack中,css中打包背景图,路径报错
- Devexpress - office - 效果
- STM32F4 LTDC学习
- 山石网科-Hillstone-L2TP-***之配置终结篇
- WinForm系统 -- 系统架构
- 算法:Majority Element(求众数)
- Mysql报错(必解决):The user specified as a definer (‘mysql.infoschema‘@‘localhost‘) does not exist
- 建造者模式之Java实战个人理解和图解
- c语言错误不允许使用不完整的类型,C语言不允许使用不完整的类型报错是什么意思啊...
- keil MDK cannot access target,shutting down debug session的解决办法
- 以YOLOv5为基准实现布匹缺陷检测(Fabric Defect Detection)