vue遮罩层实现
vue遮罩层实现方法
使用v-if控制显示隐藏
在Vue中可以通过v-if或v-show指令控制遮罩层的显示隐藏。定义一个布尔值数据属性控制状态。
<template>
<div>
<button @click="showMask = true">显示遮罩</button>
<div v-if="showMask" class="mask" @click="showMask = false"></div>
</div>
</template>
<script>
export default {
data() {
return {
showMask: false
}
}
}
</script>
<style>
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
}
</style>添加过渡动画
使用Vue的transition组件为遮罩层添加淡入淡出效果。
<transition name="fade">
<div v-if="showMask" class="mask"></div>
</transition>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>结合弹窗组件
遮罩层常与弹窗组件配合使用，点击遮罩层可关闭弹窗。
<template>
<div>
<button @click="showDialog = true">打开弹窗</button>
<div v-if="showDialog" class="mask" @click.self="showDialog = false">
<div class="dialog">
<h3>弹窗标题</h3>
<p>弹窗内容...</p>
</div>
</div>
</div>
</template>
<style>
.dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
z-index: 1000;
}
</style>使用UI框架
主流UI框架如Element UI、Ant Design Vue等提供了现成的遮罩层组件。
Element UI示例：
<el-dialog :visible.sync="dialogVisible" title="提示">
<span>这是一段信息</span>
</el-dialog>Ant Design Vue示例：
<a-modal v-model="visible" title="基本弹窗">
<p>对话框内容</p>
</a-modal>全局遮罩层
通过Vue.extend创建全局遮罩层组件，可在任何地方调用。
// mask.js
import Vue from 'vue'
const Mask = Vue.extend({
template: `<div class="mask" v-show="show" @click="hide"></div>`,
data() {
return {
show: false
}
},
methods: {
hide() {
this.show = false
}
}
})
let instance
export default {
show() {
if (!instance) {
instance = new Mask({
el: document.createElement('div')
})
document.body.appendChild(instance.$el)
}
instance.show = true
},
hide() {
instance && (instance.show = false)
}
}使用时：
import mask from './mask.js'
mask.show() // 显示遮罩
mask.hide() // 隐藏遮罩
