vue+TS+全屏弹窗组件
历史文章目录连接:https://blog.csdn.net/yy763496668/article/details/113117040此链接为CSDN连接,目的为方便大家一览博客目录!内...
·
历史文章目录连接: 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 |
更多推荐
已为社区贡献1条内容
所有评论(0)