使用 v 型槽激活器激活按钮时出现问题

Question

我在我的 Vuejs 项目中使用 v-slot:activator 和 v-btn。它工作正常，但按钮保持悬停状态，就好像它被按下一样

       <v-dialog v-model="dialog" max-width="600px">
        <template v-slot:activator="{ on, attrs }">
          <v-btn color="#F65C38" dark class="mt-1 mr-2" width="209px" v-on="on" v-bind="attrs"> Example Btn </v-btn>
        </template>
        <v-card>
          <v-card-title>
            <span class="text-h5">{{ formTitle }}</span>
          </v-card-title>

          <v-card-text>
            <v-form ref="form" v-model="valid">
              <v-container>
                <v-row>
                 

                  
               
           
                </v-row>
              </v-container>
            </v-form>
          </v-card-text>

          <v-card-actions class="d-flex justify-center">
            <v-btn color="#f66037" plain @click="close" elevation="4" dark width="209" class="mb-6"> No </v-btn>
            <v-btn color="#F65C38" @click="save" dark width="209" class="mb-6"> save </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

数据：

dialog: false

观看：

  dialog(val) {
      val || this.close();
    },

方法：

    close() {
  this.dialog = false;
  this.$nextTick(() => {
    this.editedItem = Object.assign({}, this.defaultItem);
    this.editedIndex = -1;
  });

点击前

点击后

Answer 1

您可以使用原生 JS 方法手动移除焦点：

document.activeElement.blur()

在您的示例中，您可以将此行放入 $nextTick:

...
close() {
  this.dialog = false;
  this.$nextTick(() => {
    this.editedItem = Object.assign({}, this.defaultItem);
    this.editedIndex = -1;
    document.activeElement.blur()
  });
},

测试这个 at CodePen。

使用 v 型槽激活器激活按钮时出现问题

Problem with button activation with v-slot activator

javascript

frontend

vue.js

vuejs2

vuetify.js