vue3设置遮罩1

107 阅读 0 评论 71 点赞

我是靠谱客的博主清新蜡烛，最近开发中收集的这篇文章主要介绍vue3设置遮罩1，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

原文地址：DIY vue3组件: 动手实现高斯模糊遮罩层的对话框效果 - 知乎

最近爱上了前端设计，就当是给平时写AI的自己做一次简单的放松吧。最近正好在帮好朋友重构班级主页网站，得益于vue3强大的模块化设计，许多我在开发个人网站时的组件和钩子都可以直接复用，正好整理一下我个人自己写的感觉还算好看的组件的实现。后面几期文章大概都是这样。

有人就会问了：锦恢呀，现在不是有很多的组件库吗，比如element-plus，干嘛还要自己写呢？
锦恢：是的，element-plus固然很优秀很快乐，但是一来它提供的接口有限，想要自己修改控件样式比较困难，我想，对于设计爱好者来说这可能是无法接受的；二来，element-plus这样的组件比较大，其实只要你够用心，HTML5+CSS3+vue3就完全可以设计出复用性好、文件小巧、动效华丽的组件了。再者，锦恢的代码可以直接拿去用，其实也挺方便的。
为了增加读者您在复用时的快乐程度，让诸位在尽可能短的时间内知道组件的特效、完成复用，并在后续进行自定义修改，锦恢将会这么组织文章内容：

展示组件效果
通过代码展示使用方法
附录代码（直接复制粘贴就行）
组件效果展示
登录界面和切换背景图片的对话框都是高斯遮罩层的对话框，比较像苹果家的那种特效，可以更好地将人们的目光焦点聚集在对话框上。

高斯模糊遮罩层的对话框
用法
参数：

width：对话框块级元素width
height：对话框块级元素height
v-model:showDialog：绑定的元素，false时对话框隐藏，true时展示对话框
槽：

header：标题部分
匿名槽：主体部分
template部分：

<KDialog width="60%" height="auto" v-model:showDialog="showDialog">
<template #header>

</template>

</KDialog>
script部分：

import { ref } from "vue"
export default {
setup() {
let showDialog = ref(false);
return { showDialog }
}
}
你只需要再加一个按钮控制showDialog为true即可。

源码
<template>
<teleport to='body'>
<transition name="fade">
<div class="Mask" v-show="showDialog">
<div class="Dialog" :style="`height: ${height};width: ${width};`">
<div class="DialogTitle">
<slot name="header"></slot>
<div>
<div class="littleClose" @click="closeDialog">×</div>
</div>
</div>
<el-divider></el-divider>
<slot></slot>
</div>
</div>
</transition>
</teleport>
</template>

export default {
name: "Dialog",
props: ["showDialog", "width", "height"],
emits: ["update:showDialog"],
setup(props, emits) {
let store = useStore();
let width = "30%";
let height = "auto";
if (props.width !== undefined)
width = props.width;
if (props.height !== undefined)
height = props.height

function closeDialog() {
emits.emit("update:showDialog", false);
}

return {
closeDialog,
height,
width
};
},
};
</script>

.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fade-enter-to,
.fade-leave-from {
opacity: 1;
}
.fade-enter-active,
.fade-leave-active {
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
}

.Dialog {
background-color: rgba(250, 250, 250, 0.7);
border-radius: 1.2em;
padding: 20px;
box-shadow: 0px 0px 1px 2px var(--mainColor);
}

.DialogTitle {
display:flex;
justify-content: space-between;
}

.littleClose {
border-radius: .3em;
background-color: var(--mainColor);
color: white;
cursor: pointer;
padding:0 7px;
}

.littleClose {
color: var(--mainColor);
padding: 0 10px;
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 1px 2px var(--mainColor);
transition: 0.3s;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
}

.littleClose:hover {
background-color: var(--mainColor);
color: white;
transition: 0.3s;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
}

</style>

请自行设置变量--mainColor和--backFilter，此处给出一种可行的样式方案：

:root {
--mainColor : rgba(245, 106, 106, 1);
--backFilter : saturate(180%) blur(10px);
}