历史文章目录连接： https://blog.csdn.net/yy763496668/article/details/113117040 此链接为CSDN连接，目的为方便大家一览博客目录！内容会定期更新。

微信公众号：猿媛大本营

概述:

解决在vue框架中弹窗背景的问题

正文：

近期项目中,前面弹窗比较多，数据形式展示不同，就封装了一个全屏弹窗背景组件，这个组件可以作为一个容器来展示弹窗的内容。

vue文件中源码如下：

YPopView.vue

<template>
    <div class="pop-view" v-show="active"><slot></slot></div>
</template>


<script lang="ts">


export default
{
    props:{
        active:{
            active:Boolean,
            default:false
        }
    },
}
</script>


<style scoped>
.pop-view
{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
}
</style>

我们公开一个active属性来控制该容器的显示与隐藏。

使用的时候如下：

import YPopView from "../components/YPopView.vue";

在component中注册

components:{
    YPopView
},

<y-pop-view :active="false"><button>1231</button></y-pop-view>

当active 为fasle的时候整个  y-pop-view 不显示

当active为true的时候效果如下

THIS IS ALL ！！THANKS!!!

【关注、点赞，收藏】 关注公众号，您将第一时间收到文章更新 微信公众号：猿媛大本营 QQ群号：1056320746