Vue.js中如何为Vuetify的v-snackbar设置bottom样式实现底部堆叠

样式不生效的根因 #

v-snackbar 默认自带 position: fixed !important 以及内置的 bottom: 8px !important 规则，内置样式优先级高于普通行内样式，所以你自定义的bottom值会被覆盖。

可行的解决方法 #

可以通过外层容器嵌套+内部绝对定位的方式实现堆叠，修改后的Snackbar.vue代码如下：

<template>
    <!-- 外层容器固定在视口底部，作为内部snackbar的定位参照 -->
    <div class="snackbar-wrapper">
        <v-snackbar
           v-for="(snackbar, index) in snackbars"
           :key="index"
           v-model="snackbar.visible"
           :color="snackbar.color"
           absolute <!-- 开启绝对定位，相对于外层wrapper -->
           :style="{ bottom: `${index * 60 + 8}px` }"
        >
          {{ snackbar.text }}
        </v-snackbar>
    </div>
</template>

<style scoped>
.snackbar-wrapper {
  position: fixed;
  z-index: 999; /* 保证snackbar在最上层 */
  bottom: 0;
  left: 0;
  right: 0;
}
</style>

如果用的是Vuetify 3版本，只需要额外给v-snackbar添加:location="false"属性关闭默认位置规则即可。

补充说明 #

如果不想修改嵌套结构，也可以直接给行内样式的bottom值添加强制生效标识，写法为：
:style="{ bottom: ${index * 60 + 8}px !important }"

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