前言
最近在uniapp中要写一个弹窗,弹窗好写,但是遮罩没有接触过。找到了下面这篇文章,推荐仔细阅读一下。在这篇文章的基础下,简单封装了一个遮罩。
遮罩
备注
组件名不要命名为mask
,控制台会提示Do not use built-in or reserved HTML elements as component id,意思是不要将内置或保留的HTML元素用作组件id
效果
添加了一个close-on-click-modal
属性,默认点击遮罩,遮罩关闭。设置为false后,点击遮罩,遮罩不关闭。
遮罩实现代码:
<template>
<div class="mask">
<!-- 外层的遮罩 -->
<div class="mask-cover" v-if="isShow" @click="closeByMask"></div>
<!-- 设置动画 -->
<transition name="fade">
<!-- 内容区 -->
<div class="mask-content" v-if="isShow">
<!-- 插槽,放置要插入到遮罩里的内容 -->
<slot name="default"></slot>
</div>
</transition>
</div>
</template>
<script>
import { ref } from "vue";
export default {
props: {
//是否可以点击遮罩关闭,默认是
closeOnClickModal: {
type: Boolean,
default: true,
},
},
setup(props) {
//控制遮罩的显示
let isShow = ref(false);
//打开遮罩,由外部进行调用
let showMask = () => {
isShow.value = true;
};
//关闭遮罩
let closeMask = () => {
isShow.value = false;
};
//通过点击遮罩关闭
let closeByMask = () => {
if (props.closeOnClickModal) {
isShow.value = false;
}
};
return {
isShow,
showMask,
closeMask,
closeByMask,
};
},
};
</script>
<style scoped lang="scss">
// 最外层,设置position定位
.mask {
position: relative;
color: #2e2c2d;
font-size: 16px;
}
//遮罩,设置背景层,z-index值要足够大确保能覆盖,高度 宽度设置满 做到全屏遮罩
.mask-cover {
background: rgba($color: #000000, $alpha: 0.5);
position: fixed;
z-index: 9999;
// 设置top、left、宽高保证全屏遮罩
top: 0;
left: 0;
height: 100%;
width: 100%;
}
//内容层,z-index要大于遮罩层,确保内容在遮罩上显示
.mask-content {
position: fixed;
top: 30%;
height: 70%;
z-index: 10000;
}
//动画
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>
demo代码:
<template>
<div>
<el-button type="primary" @click="openDialog">打开</el-button>
<yc-mask ref="maskRef" :close-on-click-modal="false">
<div class="dialog">
<div>我是弹窗</div>
<el-button type="primary" @click="closeDialog">关闭</el-button>
</div>
</yc-mask>
</div>
</template>
<script>
import { ref } from "vue";
import ycMask from "./yc-mask.vue";
export default {
components: {
ycMask,
},
setup() {
//获取遮罩的实例
let maskRef = ref(null);
//打开弹窗
let openDialog = () => {
maskRef.value.showMask();
};
//关闭弹窗
let closeDialog = () => {
maskRef.value.closeMask();
};
return {
maskRef,
openDialog,
closeDialog,
};
},
};
</script>
<style scoped lang="scss">
.dialog {
width: 200px;
height: 200px;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
</style>