vue 实现遮罩
Vue 实现遮罩的方法
在Vue中实现遮罩效果通常可以通过动态绑定样式或使用组件库完成。以下是几种常见方法：
使用CSS和v-show/v-if控制显示
通过Vue的指令控制遮罩层的显示与隐藏，结合CSS实现样式：
<template>
<div>
<div class="mask" v-show="showMask" @click="closeMask"></div>
<button @click="showMask = true">显示遮罩</button>
</div>
</template>
<script>
export default {
data() {
return {
showMask: false
}
},
methods: {
closeMask() {
this.showMask = false
}
}
}
</script>
<style>
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
</style>使用transition实现动画效果
为遮罩添加淡入淡出动画效果：
<template>
<transition name="fade">
<div class="mask" v-show="showMask"></div>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>使用UI组件库
主流UI库如Element UI、Ant Design Vue等都提供现成的遮罩组件：
<!-- Element UI -->
<el-dialog :visible.sync="showMask" :modal="true">
内容
</el-dialog>
<!-- Ant Design Vue -->
<a-modal v-model="showMask" :mask="true">
内容
</a-modal>自定义遮罩组件
创建可复用的遮罩组件：
<!-- Mask.vue -->
<template>
<div class="mask" v-show="visible" @click="$emit('close')">
<slot></slot>
</div>
</template>
<script>
export default {
props: {
visible: Boolean
}
}
</script>使用时：
<Mask :visible="showMask" @close="showMask = false">
自定义内容
</Mask>这些方法可以根据项目需求选择使用，CSS方案最轻量，组件库方案功能更完善，自定义组件灵活性最高。
