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:

該組件接受以下道具：

AttributeTypeDefaultDescription

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组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。