Vue компонент кредитной карты - PullRequest
Новая
       38

Vue компонент кредитной карты

0 голосов
/ 29 июня 2019

Я пытаюсь использовать https://github.com/thiago-Malaca/vue-credit-card для отображения информации о карте. Но я не смог конвертировать карту, когда сфокусировалась информация cvc. Есть ли кто-нибудь, кто может мне помочь. Я пересмотрел директивы, но мне чего-то не хватает. Я попытался добавить директиву v-card-focus в области ввода, но она не работает для меня.

Кроме того, это мой код: я тоже могу предоставить дополнительную информацию. Спасибо. 

<template>
<div class="card mb-5 mb-lg-0 p-2">
<div class="card-body">
    <card :value="{number, name, expiry, cvc}"></card>
    <v-form>
        <v-container fluid>
            <v-layout>
                <v-flex xs24>
                    <v-text-field v-model="name"  :rules="nameRules" label="İsim Soyisim" required></v-text-field>
                </v-flex>
            </v-layout>
            <v-layout>
                <v-flex xs12>
                    <v-text-field v-model="number" :rules="cardRules" label="Kart Numarası" required>
                    </v-text-field>
                </v-flex>
            </v-layout>
            <v-layout>
                <v-flex xs12>
                    <v-text-field v-model="expiry" :rules="expiryRules" label="Son Kullanma Tarihi" required></v-text-field>
                </v-flex>

                <v-flex xs12>
                    <v-text-field v-model="cvc" :rules="cvcRules" label="cvc" name="cvc" required></v-text-field>
                </v-flex>
            </v-layout>
        </v-container>
    </v-form>
</div>


<script>
import Card from 'vue-credit-card';

export default {
    name: 'CheckoutForm',
    data () {
    return {
        number : '',
        name : '',
        expiry : '',
        cvc : '',
        nameRules: [
            v => !!v || 'Lütfen adınızı ve soyadınızı giriniz.',
            v => v.length > 3 || 'En az 3 karakter uzunluğunda olmalıdır.'
        ],
        cardRules: [
            v => !!v || 'Lütfen Kart Numarasını giriniz.',
            v => v.length > 15 || 'En az 15 karakter uzunluğunda olmalıdır.'
        ],
        expiryRules: [
            v => !!v || 'Lütfen kartınıza ait son kullanma tarihini giriniz.',
            v => v.length > 4 || 'En az 4 karakter uzunluğunda olmalıdır.'
        ],
        cvcRules: [
            v => !!v || 'Lütfen kartınızın arkasında bulunan CVC numarasını giriniz.',
            v => v.length > 3 || 'En az 4 karakter uzunluğunda olmalıdır.'
        ],
        focused : 'false'

    }
},
components: {
    Card
},
methods: {
    isFocused () {
        return this.focused;
    }
}
}

</script>

1 Ответ

0 голосов
/ 29 июня 2019

Я нашел проблему.Мы должны добавить директиву в cvc с именем input.Но когда мы добавляем v-card-focus на v-text-field, vuetify не добавляет эту директиву в область ввода.

Я не смог найти способ использовать ее с vuetify, если вы все равно нашлиПожалуйста, добавьте свой ответ.

Спасибо.

...