123 lines
2.7 KiB
Vue
123 lines
2.7 KiB
Vue
<template>
|
||
<scroll-view scroll-y v-show="ifshow" @tap="ableClose" @touchmove.stop.prevent class="popup-layer">
|
||
<view ref="popRef" class="popup-content" @tap.stop="stopEvent" :style="_location">
|
||
<slot></slot>
|
||
</view>
|
||
</scroll-view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'popup-layer',
|
||
props: {
|
||
direction: {
|
||
type: String,
|
||
default: 'top', // 方向 top，bottom，left，right
|
||
},
|
||
autoClose: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
isTransNav: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
navHeight: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
ifshow: false, // 是否展示,
|
||
translateValue: -100, // 位移距离
|
||
timer: null,
|
||
iftoggle: false,
|
||
};
|
||
},
|
||
computed: {
|
||
_translate() {
|
||
if (this.isTransNav) {
|
||
const transformObj = {
|
||
'top': `transform:translateY(${-this.translateValue}%)`,
|
||
'bottom': `transform:translateY(calc(${this.translateValue}% + ${this.navHeight}px))`,
|
||
'left': `transform:translateX(${-this.translateValue}%)`,
|
||
'right': `transform:translateX(${this.translateValue}%)`
|
||
};
|
||
return transformObj[this.direction]
|
||
} else {
|
||
const transformObj = {
|
||
'top': `transform:translateY(${-this.translateValue}%)`,
|
||
'bottom': `transform:translateY(${this.translateValue}%)`,
|
||
'left': `transform:translateX(${-this.translateValue}%)`,
|
||
'right': `transform:translateX(${this.translateValue}%)`
|
||
};
|
||
return transformObj[this.direction]
|
||
}
|
||
|
||
},
|
||
_location() {
|
||
const positionValue = {
|
||
'top': 'bottom:0px;width:100%;',
|
||
'bottom': 'top:0px;width:100%;',
|
||
'left': 'right:0px;height:100%;',
|
||
'right': 'left:0px;height:100%;',
|
||
};
|
||
return positionValue[this.direction] + this._translate;
|
||
}
|
||
},
|
||
methods: {
|
||
show() {
|
||
let _this = this;
|
||
this.ifshow = true;
|
||
let _open = setTimeout(() => {
|
||
this.translateValue = 0;
|
||
_open = null;
|
||
}, 100)
|
||
let _toggle = setTimeout(() => {
|
||
this.iftoggle = true;
|
||
_toggle = null;
|
||
}, 300);
|
||
},
|
||
close() {
|
||
if (this.timer !== null || !this.iftoggle) {
|
||
return;
|
||
}
|
||
this.translateValue = -100 - this.navHeight;
|
||
|
||
this.timer = setTimeout(() => {
|
||
this.ifshow = false;
|
||
this.timer = null;
|
||
this.iftoggle = false;
|
||
}, 300);
|
||
this.$emit("close")
|
||
},
|
||
ableClose() {
|
||
if (this.autoClose) {
|
||
this.close();
|
||
}
|
||
},
|
||
stopEvent(event) {},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.popup-layer {
|
||
position: absolute;
|
||
z-index: 999999;
|
||
background: rgba(0, 0, 0, .3);
|
||
height: calc(85vh - 50px);
|
||
width: 100%;
|
||
left: 0px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.popup-content {
|
||
position: absolute;
|
||
z-index: 1000000;
|
||
background: #FFFFFF;
|
||
transition: all .3s ease;
|
||
}
|
||
</style>
|