vue选项卡组件_Vue的信用卡组件

vue选项卡组件

@ fracto / vue-credit卡 (@fracto/vue-credit-card)

Another Credit Card Component for VueJS.

VueJS的另一个信用卡组件。

特征 (Features)

Note: Localization supports only Turkish & English for now.

注意：本地化目前仅支持Turkish和English 。

• [x] Localization (i18n) (All translations are welcome)

  [x]本地化(i18n)(欢迎所有翻译)

• [x] Card Preview

  [x]卡片预览

• [x] Hide sensitive information

  [x]隐藏敏感信息

• [x] Card input mask

  [x]卡输入遮罩

• [x] Easily customizable

  [x]易于定制

• [ ] Validator

  [ ] 验证器

入门 (Getting Started)

进口 (Import)

共同 (Common)

import VueCreditCard from '@fracto/vue-credit-card';
/* Globally use */
Vue.use(VueCreditCard);
/* Local Component */
export default {
    components: {VueCreditCard}
}

浏览器 (Browser)

<link rel="stylesheet" href="https://unpkg.com/@fracto/vue-credit-card/dist/VueCreditCard.css">
<div id="app">
    <vue-credit-card></vue-credit-card>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/@fracto/vue-credit-card/dist/VueCreditCard.umd.js"></script>
<script>
    Vue.component('vue-credit-card', VueCreditCard);
    var app = new Vue({
        el: '#app',
    });
</script>

用法 (Usage)

<vue-credit-card :preview-enabled="true" v-model="creditCardForm" :card-types="myCustomCardTypes">
</vue-credit-card>

Prop preview-enabled enables or disabled Card preview.

preview-enabled支持preview-enabled可以启用或禁用名片预览。

Prop card-types allows you to change or add new card types. Example usage:

道具card-types允许您更改或添加新卡类型。 用法示例：

<div id="app">
<vue-credit-card :preview-enabled="true" :card-types="cardTypes">
</vue-credit-card>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/@fracto/vue-credit-card/dist/VueCreditCard.umd.js"></script>
<script>
    Vue.component('vue-credit-card', VueCreditCard);
    var app = new Vue({
        el: '#app',
        data: {
            cardTypes: [
                {regEx: /^4[0-9]{5}/ig, name: 'visa', icon: require('../assets/visa_icon.png')},
                {regEx: /^5[1-5][0-9]{4}/ig, name: 'mastercard', icon: require('../assets/master_icon.png')},
            ]
        },
    });
</script>

The variable creditCardForm is a model which formatted like this:

变量creditCardForm是一个格式如下的model ：

{
    "holder": "Orkun ÇAKILKAYA",
    "number": 9792030000000000,
    "month": 12,
    "year": 23,
    "cvv": 456
}

本土化 (Localization)

<div id="app">
<vue-credit-card :preview-enabled="true" :card-types="cardTypes">
</vue-credit-card>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/@fracto/vue-credit-card/dist/VueCreditCard.umd.js"></script>
<script>
    VueCreditCard.i18n.locale = 'tr'; // Changes locale to Turkish (default is English)
    Vue.component('vue-credit-card', VueCreditCard);
    var app = new Vue({
        el: '#app',
    });
</script>

翻译自: https://vuejsexamples.com/credit-card-component-for-vue/

vue选项卡组件