vue-credit-card组件CVC输入聚焦时卡片无法切换问题求助

嘿，我刚好熟悉这个vue-credit-card组件，帮你拆解下问题：你现在的代码里虽然定义了focused变量，但既没把它传递给卡片组件，也没和CVC输入框的聚焦事件绑定，所以卡片根本不知道什么时候要切换到背面。

下面是一步步的修复方案：

1. 给卡片组件传递focused属性 #

这个组件的卡片切换逻辑是靠focused属性控制的：当它的值为'cvc'时，卡片显示背面；为false或其他值时显示正面。先把你的focused变量传给<card>组件：

<card :value="{number, name, expiry, cvc}" :focused="focused"></card>

2. 给CVC输入框绑定聚焦/失焦事件 #

接下来要让CVC输入框的聚焦状态同步到focused变量上，添加@focus和@blur事件：

<v-text-field 
  v-model="cvc" 
  :rules="cvcRules" 
  label="cvc" 
  name="cvc" 
  required
  @focus="focused = 'cvc'"
  @blur="focused = false"
></v-text-field>

另外，给其他输入框也加上@blur="focused = false"，这样点击其他输入框时，卡片会切回正面，交互体验更流畅。

3. 修正focused的初始值 #

你之前把focused设成了字符串'false'，这会导致组件的状态判断逻辑出错，改成布尔值false就对了：

data () {
  return {
    // ...其他变量
    focused: false
  }
}

4. 完整修正后的代码 #

Template部分： #

<template>
  <div class="card mb-5 mb-lg-0 p-2">
    <div class="card-body">
      <card :value="{number, name, expiry, cvc}" :focused="focused"></card>
      <v-form>
        <v-container fluid>
          <v-layout>
            <v-flex xs24>
              <v-text-field 
                v-model="name" 
                :rules="nameRules" 
                label="İsim Soyisim" 
                required
                @blur="focused = false"
              ></v-text-field>
            </v-flex>
          </v-layout>
          <v-layout>
            <v-flex xs12>
              <v-text-field 
                v-model="number" 
                :rules="cardRules" 
                label="Kart Numarası" 
                required
                @blur="focused = false"
              ></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
                @blur="focused = false"
              ></v-text-field>
            </v-flex>
            <v-flex xs12>
              <v-text-field 
                v-model="cvc" 
                :rules="cvcRules" 
                label="cvc" 
                name="cvc" 
                required
                @focus="focused = 'cvc'"
                @blur="focused = false"
              ></v-text-field>
            </v-flex>
          </v-layout>
        </v-container>
      </v-form>
    </div>
  </div>
</template>

Script部分： #

<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
  }
}
</script>

关于之前v-card-focus失效的说明 #

这个组件的v-card-focus指令其实是用来自动关联输入框和卡片聚焦状态的，但它需要组件内部的状态支持，有时候在和Vuetify的v-text-field配合时会有兼容性问题。手动绑定聚焦事件的方式反而更可靠，也更容易调试。

现在测试一下：点击CVC输入框，卡片应该会立刻切换到背面；点击其他输入框或者页面空白处，卡片就切回正面了～

内容的提问来源于stack exchange，提问作者Hayreddin Tüzel