vue实现全屏遮罩层
实现全屏遮罩层的方法
在Vue中实现全屏遮罩层可以通过CSS和Vue组件结合完成。以下是具体实现方式：
创建遮罩层组件
创建一个名为Overlay.vue的组件：
<template>
<div
class="overlay"
v-show="visible"
@click.self="handleClick"
>
<slot></slot>
</div>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false
}
},
methods: {
handleClick() {
this.$emit('close');
}
}
}
</script>
<style scoped>
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
</style>使用遮罩层组件
在父组件中使用：
<template>
<div>
<button @click="showOverlay = true">显示遮罩层</button>
<Overlay :visible="showOverlay" @close="showOverlay = false">
<!-- 这里可以放置弹窗内容 -->
<div class="modal-content">
<h3>这是遮罩层中的内容</h3>
<button @click="showOverlay = false">关闭</button>
</div>
</Overlay>
</div>
</template>
<script>
import Overlay from './Overlay.vue'
export default {
components: { Overlay },
data() {
return {
showOverlay: false
}
}
}
</script>
<style>
.modal-content {
background: white;
padding: 20px;
border-radius: 5px;
}
</style>动态控制遮罩层
通过v-model可以更优雅地控制遮罩层显示：
<template>
<Overlay v-model="showOverlay">
<!-- 内容 -->
</Overlay>
</template>
<script>
export default {
model: {
prop: 'visible',
event: 'close'
},
// 其他代码保持不变
}
</script>遮罩层动画效果
添加过渡动画增强用户体验：
<template>
<transition name="fade">
<div class="overlay" v-show="visible">
<!-- 内容 -->
</div>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>全局遮罩层服务
对于需要在任意组件触发的遮罩层，可以创建全局服务：
// overlayService.js
import Vue from 'vue'
const OverlayComponent = Vue.extend({
template: `<div class="overlay" v-show="visible"></div>`,
data() {
return {
visible: false
}
}
})
const overlay = new OverlayComponent({
el: document.createElement('div')
})
document.body.appendChild(overlay.$el)
export default {
show() {
overlay.visible = true
},
hide() {
overlay.visible = false
}
}然后在任何组件中调用：
import overlayService from './overlayService'
// 显示遮罩层
overlayService.show()
// 隐藏遮罩层
overlayService.hide()
