Vuetify：如何收听对话的关闭事件？

Question

我觉得<v-dialog @close="close">不行。

如何监听对话框的关闭事件？

Answer 1

vuetify 文档没有显示任何 close 对话框事件也许你可以仔细检查或澄清 vuetify 版本（如果是这样的话）

没有事件的解决方法可以使用 watch:

<script>
export default {
 data(){
  show:false
 },
 watch:{
  show:function(newValue, old){
   if(!newValue){
    // Closing
   }
  }
 }
}
</script>

并且您将对话框与 v-model 一起使用：<v-dialog v-model="show">

每当 show 等于 true 时，对话框就会显示，使用观察器您将知道何时将 show 设置为 false 并关闭对话框。

Answer 2

您可以实现自己的关闭事件。我的意思是，在您的关闭或保存按钮上单击您发出 'close'.

 <template>
   <v-dialog v-model="dialog">
     <v-card>
       ...
       <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn text @click="close"> Close </v-btn>
          <v-btn text @click="close"> Save </v-btn>
       </v-card-actions>
     </v-card>
  </v-dialog>
</template>    
<script>
export default {
  props: ["dialog"],
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>

Answer 3

为此，您实际上可以使用@input 事件。由于我的激活器按钮在我的组件之外，我使用“activated”道具来触发对话框，并且由于我们不应该从组件内部改变道具，所以我在对话框关闭时发出 update:activated 事件。

<template>
    <v-dialog v-model="dialog" @input="close">
    </v-dialog>
</template>    

<script>
    export default {
        data() {
            return {
                dialog: false
            };
        },
        props: {
            activated: {
                type: Boolean
            }
        },
        watch: {
            activated: {
                immediate: true,
                handler(newValue) {
                    if (newValue) {
                        this.dialog = true;
                    }
                }
            }
        },
        methods: {
            close() {
                this.$emit('update:activated', false);
            }
        }
    };
</script>

Vuetify：如何收听对话的关闭事件？

Vuetify: How to listen close event of a dialog?

vuetify.js