Vuetify中v-alert组件关闭时无法触发自定义函数如何解决

你之前绑定的常规点击事件不生效，是因为这类事件作用于v-alert整个容器，仅点击提示框非关闭按钮区域才会触发，而关闭按钮是组件内部独立的交互元素，有专属的事件抛出。两种保留原生dismissible自动移除能力的实现方案如下：

方案1：监听组件内置关闭按钮事件 #

直接绑定v-alert暴露的关闭按钮专属事件即可，适配绝大多数场景：

• Vuetify 2.x 可使用 @click:close 或配合v-model绑定@input事件
• Vuetify 3.x 统一使用 @click:close 事件

代码示例：

<template>
  <v-alert
    dismissible
    v-model="showAlert"
    @click:close="customCloseLogic"
    type="warning"
  >
    可关闭的提示内容
  </v-alert>
</template>

<script>
export default {
  data() {
    return {
      showAlert: true
    }
  },
  methods: {
    customCloseLogic() {
      // 此处写入你的自定义业务逻辑
      console.log("警告框已触发关闭")
    }
  }
}
</script>

方案2：监听动画结束事件（适配关闭后执行需求） #

如果你需要等警告框的平滑移除动画完全结束后再执行自定义逻辑，可以监听过渡结束事件：

<v-alert
  dismissible
  v-model="showAlert"
  @transitionend="(e) => e.propertyName === 'opacity' && customCloseLogic()"
>
  可关闭的提示内容
</v-alert>

该方案会在提示框完全消失、动画执行完毕后才触发自定义逻辑，完全不影响原生的自动移除能力。

内容的提问来源于stack exchange，提问作者mikeym