uniapp vue3 添加一个全局遮罩

在 UniApp 的 Vue3 中添加一个全局遮罩（通常用于弹窗提示、加载中等场景），你可以创建一个自定义组件或者利用 Vue 的 mixin 来共享状态。这里是一个简单的示例：

首先，创建一个名为 `dialog-mask.vue` 的全局组件文件：

<template>
  <view class="dialog-mask" v-if="showMask">
    <slot></slot> <!-- 如果需要放额外内容，可以使用 slot -->
    <uni-modal :mask="true" @closed="hideMask"> <!-- 使用 uni-modal 组件模拟遮罩 -->
      <div class="dialog-mask-content">遮罩内容</div>
    </uni-modal>
  </view>
</template>

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

const showMask = ref(false); // 定义一个布尔型的 ref 来控制遮罩是否显示

function hideMask() {
  showMask.value = false;
}

export default {
  data() {
    return {};
  },
  props: {
    // 如果有特定配置可以传入 prop
    customConfig: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['close'], // 需要在组件上声明要接收关闭事件
  methods: {
    closeDialog() {
      this.$emit('close');
      hideMask();
    }
  },
  onBeforeUpdate(() => {
    if (!this.customConfig) {
      showMask.value = false; // 初始化时不显示遮罩
    }
  }),
  onMounted(() => {
    // 这里可以根据需求设置默认显示或隐藏逻辑
  })
};
</script>

<style scoped>
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}
.dialog-mask.show {
  visibility: visible;
  opacity: 1;
}
.dialog-mask-content {
  /* 根据需要自定义样式 */
}
</style>

然后，在其他组件中使用这个遮罩，只需通过 `v-model` 或者 `ref` 和 `this.$emit` 关联状态即可：

<!-- 引入 dialog-mask 全局组件 -->
<template>
  <button @click="showMask = true">打开遮罩</button>
  <dialog-mask ref="dialogMask" :custom-config="{ closeFn: onClose }" v-model="showMask"></dialog-mask>
</template>

<script>
import DialogMask from '@/components/dialog-mask.vue';

export default {
  components: {
    DialogMask
  },
  methods: {
    onClose() {
      this.$refs.dialogMask.closeDialog(); // 发送关闭请求
    }
  }
};
</script>