基于vue3.0的遮罩

前言

最近在uniapp中要写一个弹窗，弹窗好写，但是遮罩没有接触过。找到了下面这篇文章，推荐仔细阅读一下。在这篇文章的基础下，简单封装了一个遮罩。

推荐文章：论如何用Vue实现一个弹窗-一个简单的组件实现

遮罩

备注
组件名不要命名为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>

基于vue3.0的遮罩相关推荐

基于vue3.0简单的页面使用
基于vue3.0简单的页面使用项目效果图项目文件图 package.json main.js App.vue views/Tutorial.vue views/TS.vue views/Docs. ...
【Vue3 造轮子项目 ------ kaite-ui】基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI
基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI 前言前段时间笔者一直忙于学习Vue3方面新知识,比如如何从vue2.0版本过渡到vue3.0,如何理解 ...
mars3d基于vue3.0的widget使用
mars3d在vue3.0生态上开发了两个gis相关开源项目 mars3d-vue-example 和 mars3d-vue-project,在这两个项目中widget都是非常重要的一个模块.通过wi ...
基于Vue3.0+ElementPlus后台精简模板
前言欢迎使用VUE3.0 + ElementPlus 后台管理模板 UI库文档: https://element-plus.gitee.io/#/zh-CN 该项目基于Vuecli 使用Vue3 + ...
基于Vue3.0+Springboot在线购物商城网站设计
开发技术环境: Idea + Vscode + Mysql + Springboot + vue3.0 基于vue的购物商城网站分为前台功能和后台管理功能,前台功能主要包括基础功能模块.订单管理模块. ...
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
【vite+vue3.0】基于vite写一个将md文件渲染为js文件的插件
基于vite写一个将md文件渲染为js文件的插件前言尤大是这么描述 Vite 的: 「一个基于浏览器原生 ES imports 的开发服务器. 利用浏览器去解析 imports,在服务器端按需编译 ...
vant 项目_基于 vue3.x+vant3.x 搭建示例项目
今天给大家分享一些如何使用Vue3.0+Vant3搭建demo项目. 目前市面上有关vue3的项目并不多,vue3的UI组件库有ant-design-vue和vant-ui. 接下来讲解下使用vue3 ...
Vue vben admin - 新鲜出炉的高颜值管理后台UI框架，基于 Vue3 和 Ant Design Vue
基于Vue3.0 / Vite / Ant Design 等火热开源项目构建,新鲜出炉,值得关注. 关于 Vue vben admin Vue Vben Admin 是一个基于 Vue3.0.Vite ...
Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例
vue3-webchat 基于vue3.0.5开发的仿微信|QQ界面桌面端聊天实例. 运用vue3.x全家桶技术+element-plus+v3layer+v3scroll搭建的仿微信/QQ界面网页聊 ...

基于vue3.0的遮罩

前言

遮罩

基于vue3.0的遮罩相关推荐

最新文章

热门文章