<template>
<!-- 弹框模板 -->
<transition name="slider">
<div class="downloadArchive" v-if="value">
<div class="content"><slot></slot></div>
<div class="fixed-bg"></div>
</div>
</transition>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
default: false
}
},
methods: {
hide() {
this.currentValue = false
}
},
computed: {
currentValue: {
get() {
return this.value
},
set(value) {
this.$emit('input', value)
}
}
}
}
</script>
<style lang="scss" scoped>
.slider-enter-active,.slider-leave-active{
transition: all 0.3s;
.content{
transition: all 0.4s;
}
}
.slider-enter,.slider-leave-to{
opacity: 0;
.content{
transform: translate3d(100%, 0, 0);
}
}
.downloadArchive{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
.fixed-bg{
width: 100%;
height: 100%;
background: #000000;
opacity: 0.3;
}
.content{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 800px;
background: #f5f5f5;
z-index: 100;
}
}
</style>
vue-vant的弹出框
最新推荐文章于 2023-07-19 16:36:34 发布