Vue.js中打开Vuetify的v-dialog弹窗时如何设置深色/模糊背景

Vuetify的v-dialog自带遮罩层，不需要额外写监听弹窗状态的逻辑，通过组件属性+少量自定义样式就能实现你要的效果。

实现深色/黑色背景 #

直接给v-dialog组件加两个内置属性即可，不需要改其他内部代码：

<v-dialog 
  v-model="logoutdialog" 
  width="500"
  overlay-color="#000"
  overlay-opacity="0.8"
>
  <v-card>
    <v-card-title>
      <span>Logout</span>
      <v-spacer></v-spacer>
      <v-menu bottom left>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            icon
            v-bind="attrs"
            v-on="on"
            @click="logoutdialog= false"
          >
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </template>
      </v-menu>
    </v-card-title>
    <v-card-actions>
      <v-btn
        color="primary" text @click="logoutdialog = false"
      >
        Close
      </v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

• overlay-color：控制遮罩层颜色，要纯黑填#000，要适配深色模式可以填主题对应的深色变量
• overlay-opacity：控制遮罩透明度，取值范围0-1，数值越大遮罩越深，常规场景用0.7-0.9的视觉效果最佳

实现背景模糊效果 #

组件没有提供直接配置模糊度的属性，加几行自定义CSS就能实现毛玻璃遮罩：

1. 先给v-dialog加自定义类名，同时调低遮罩透明度

<v-dialog 
  v-model="logoutdialog" 
  width="500"
  class="custom-blur-dialog"
  overlay-color="#000"
  overlay-opacity="0.4"
>
  <!-- 内部弹窗内容和上面代码一致，不需要修改 -->
</v-dialog>

2. 在非scoped的全局样式文件里添加以下样式：

.custom-blur-dialog .v-overlay {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

• blur(4px)的数值可以根据需求调整，数值越大模糊程度越高，常规场景3-6px效果最自然
• 不要把overlay-opacity设太高，否则模糊效果会被深遮罩盖住，体现不出层次感

版本兼容提示：如果使用的是Vuetify 2.x版本，把上述CSS代码里的.v-overlay替换为.v-overlay__scrim即可正常生效。

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