vue全局遮罩

都挺好，刚刚好

已于 2023-08-01 09:17:15 修改

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue2 文章标签： vue.js 前端 javascript

于 2023-07-31 22:50:00 首次发布

本文链接：https://blog.youkuaiyun.com/seimeii/article/details/132032135

本文介绍了如何创建一个全局的Mask.vue组件用于显示遮罩层，并通过Vue的v-if或v-show控制其显示隐藏。利用provide/inject或Vuex进行全局状态管理，实现遮罩层显示的控制。在需要时调用showMask和hideMask方法即可切换遮罩的可见性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建一个全局组件，例如Mask.vue，用于显示遮罩层的内容。

<template>
  <div class="mask" v-if="show">
    <!-- 遮罩层的内容 -->
  </div>
</template>

<script>
export default {
   
   
  data() {
   
   
    return {
   
   
      show: false // 控制遮罩层的显示与隐藏
    };
  }
};
</script>

<style scoped>
.mask