vue 弹框去除遮罩层

Vue.js 中，如果你想在创建弹框组件时移除遮罩层，通常会在组件的样式中处理。对于基于 Vue UI 组件库如 Element Plus、Vuetify 或者自定义的弹框组件，你可以这样做：

1. **Element Plus**:
- 在 `el-dialog` 的样式中添加 CSS 规则，比如 `.el-dialog-mask{display:none}` 来隐藏遮罩层。

<template>
  <el-dialog :mask="false" :visible.sync="dialogVisible">
    <!-- 内容 -->
  </el-dialog>
</template>

<style scoped>
.el-dialog-mask {
  display: none;
}
</style>

2. **Vuetify**:
- 类似地，在 `v-dialog` 上设置 `v-model` 并添加样式 `.v-dialog__overlay { opacity: 0; pointer-events: none; }`.

<template>
  <v-dialog v-model="dialogVisible">
    <!-- 内容 -->
  </v-dialog>
</template>

<style scoped>
.v-dialog__overlay {
  opacity: 0;
  pointer-events: none;
}
</style>

3. **自定义组件**:
如果是自定义的弹框组件，可以在组件内部提供一个布尔属性控制遮罩层的显示与否，并通过 CSS 或者 JavaScript 调整其样式。

export default {
  props: {
    showMask: {
      type: Boolean,
      default: true,
    },
  },
  template: `
    <div class="modal-overlay" v-if="showMask"></div>
    <!-- 其他内容 -->
  `,
};

然后在模板中绑定 `showMask` 属性，使其可以根据需要关闭遮罩层。