如何在Vuetify 3中实现Vuetify 2风格的Snackbar组件？

核心API差异说明 #

Vuetify 3的v-snackbar和v2版本存在关键变化：

• 移除multi-line属性，需通过自定义max-width样式或默认自动换行实现多行显示
• 原生过渡系统替换为Vue 3的<Transition>/<TransitionGroup>组件，v2的transition属性不再生效
• 自动堆叠逻辑被移除，需手动通过容器布局控制多个Snackbar的排列间距

完整实现代码 #

App.vue #

<template>
  <v-app>
    <v-container class="pa-4">
      <v-btn @click="showSnackbar" color="primary">触发通知</v-btn>
    </v-container>
    
    <!-- 堆叠Snackbar容器 -->
    <div class="snackbar-stack fixed bottom-0 right-0 m-4 z-index-9999">
      <TransitionGroup name="snackbar" tag="div">
        <v-snackbar
          v-for="(snack, index) in snackbars"
          :key="snack.id"
          v-model="snack.show"
          :timeout="snack.timeout"
          color="success"
          @update:model-value="removeSnackbar(index)"
          max-width="400px"
        >
          {{ snack.text }}
          <template v-slot:actions>
            <v-btn text @click="snack.show = false">关闭</v-btn>
          </template>
        </v-snackbar>
      </TransitionGroup>
    </div>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const snackbars = ref([])
let snackId = 0

const showSnackbar = () => {
  snackbars.value.push({
    id: snackId++,
    text: '这是一条堆叠式测试通知',
    show: true,
    timeout: 5000
  })
}

const removeSnackbar = (index) => {
  setTimeout(() => {
    snackbars.value.splice(index, 1)
  }, 300)
}
</script>

<style scoped>
.snackbar-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 自定义过渡动画 */
.snackbar-enter-from,
.snackbar-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

.snackbar-enter-active,
.snackbar-leave-active {
  transition: all 0.3s ease;
}
</style>

关键实现细节 #

1. 堆叠布局：通过固定定位容器+flex垂直布局实现，gap控制Snackbar间距，z-index确保显示在最上层
2. 过渡效果：使用<TransitionGroup>处理多元素列表过渡，自定义CSS类实现滑入滑出动画，匹配v2原生效果
3. 状态管理：用数组存储多个Snackbar实例，关闭时延迟移除数组元素，保证过渡动画完整执行
4. 属性替代方案：
   • v2的multi-line：通过max-width限制宽度实现自动换行
   • v2的自动堆叠：手动通过容器gap属性控制间距

问题修复要点 #

• 过渡失效：必须使用<TransitionGroup>而非单个<Transition>，且每个Snackbar需绑定唯一key
• 动画中断：关闭事件触发后延迟移除DOM元素，等待过渡动画结束
• 样式覆盖：给容器添加z-index避免被其他元素遮挡

内容的提问来源于stack exchange，提问作者Ersin Güvenç