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选项卡组件