Blame view
src/components/sl-filter/popup-layer.vue
2.83 KB
e40e790a3
首页bug修改
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<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(100% - 50px);
width: 100%;
left: 0px;
overflow: hidden;
}
.popup-content {
position: absolute;
z-index: 1000000;
background: #FFFFFF;
transition: all .3s ease;
}
</style>
|