Quasar Framework：如何实现q-dialog弹出时背景模糊效果？

方案1：全局生效所有对话框 #

直接修改q-dialog默认遮罩层的样式，把以下CSS放入全局样式文件即可：

.q-dialog__backdrop {
  /* 模糊效果，数值越大模糊程度越高 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* 调整背景遮罩的透明度，可根据视觉效果修改 */
  background-color: rgba(0, 0, 0, 0.4);
}

方案2：仅对特定对话框生效 #

如果不需要全局所有对话框都有模糊背景，用backdrop-class属性自定义专属遮罩类即可：

• 模板中给目标q-dialog添加属性：

<q-dialog
  v-model="dialogVisible"
  backdrop-class="blur-backdrop"
>
  <!-- 对话框内容代码 -->
</q-dialog>

• 对应CSS样式：

.blur-backdrop {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(0, 0, 0, 0.4);
}

注意事项 #

• 如果你在单文件组件的<style scoped>块中写样式，需要用深度选择器选中遮罩元素：Vue2使用::v-deep .类名，Vue3使用:deep(.类名)
• backdrop-filter属性对非常老旧的浏览器（如IE、iOS 14以下版本）兼容性较差，可根据业务场景决定是否做降级处理，降级方案可直接使用半透明背景替代模糊效果
• 模糊数值可根据需求在4px-12px区间调整，数值越高模糊效果越强

内容的提问来源于stack exchange，提问作者lés