cleave.js_Cleave.js的Vue.js 2.x组件

cleave.js

切裂分量 (vue-cleave-component)

Vue.js component for cleave.js

对于Vue.js组件cleave.js

View demo 查看演示 Download Source 下载源

特征 (Features)

• Reactive v-model value

  React性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 component
  Vue.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