You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
203 lines
3.4 KiB
203 lines
3.4 KiB
<template>
|
|
<view>
|
|
<view v-show="show" :style="{ top: offsetTop + 'px' }" class="uni-mask" @click="hide" @touchmove.stop.prevent="moveHandle" />
|
|
<view v-show="show" :class="'uni-popup-' + position + ' ' + 'uni-popup-' + mode" class="uni-popup">
|
|
{{ msg }}
|
|
<slot />
|
|
<view v-if="position === 'middle' && mode === 'insert'" :class="{
|
|
'uni-close-bottom': buttonMode === 'bottom',
|
|
'uni-close-right': buttonMode === 'right'
|
|
}" class=" uni-icon uni-icon-close" @click="closeMask" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'UniPopup',
|
|
props: {
|
|
/**
|
|
* 页面显示
|
|
*/
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
/**
|
|
* 对齐方式
|
|
*/
|
|
position: {
|
|
type: String,
|
|
// top - 顶部， middle - 居中, bottom - 底部
|
|
default: 'middle'
|
|
},
|
|
/**
|
|
* 显示模式
|
|
*/
|
|
mode: {
|
|
type: String,
|
|
default: 'insert'
|
|
},
|
|
/**
|
|
* 额外信息
|
|
*/
|
|
msg: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/**
|
|
* h5遮罩是否到顶
|
|
*/
|
|
h5Top: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
buttonMode: {
|
|
type: String,
|
|
default: 'bottom'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
offsetTop: 0
|
|
}
|
|
},
|
|
watch: {
|
|
h5Top(newVal) {
|
|
if (newVal) {
|
|
this.offsetTop = 44
|
|
} else {
|
|
this.offsetTop = 0
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
let offsetTop = 0
|
|
// #ifdef H5
|
|
if (!this.h5Top) {
|
|
offsetTop = 44
|
|
} else {
|
|
offsetTop = 0
|
|
}
|
|
// #endif
|
|
this.offsetTop = offsetTop
|
|
},
|
|
methods: {
|
|
hide() {
|
|
if (this.mode === 'insert' && this.position === 'middle') return
|
|
this.$emit('hidePopup')
|
|
},
|
|
closeMask() {
|
|
if (this.mode === 'insert') {
|
|
this.$emit('hidePopup')
|
|
}
|
|
},
|
|
moveHandle() {}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.uni-mask {
|
|
position: fixed;
|
|
z-index: 998;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.uni-popup {
|
|
position: fixed;
|
|
z-index: 999;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.uni-popup-middle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.uni-popup-middle.uni-popup-insert {
|
|
min-width: 380upx;
|
|
min-height: 380upx;
|
|
max-width: 100%;
|
|
max-height: 80%;
|
|
transform: translate(-50%, -65%);
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.uni-popup-middle.uni-popup-fixed {
|
|
border-radius: 10upx;
|
|
padding: 30upx;
|
|
}
|
|
|
|
.uni-close-bottom,
|
|
.uni-close-right {
|
|
position: absolute;
|
|
bottom: -180upx;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
color: #f5f5f5;
|
|
font-size: 60upx;
|
|
font-weight: bold;
|
|
opacity: 0.8;
|
|
z-index: -1;
|
|
}
|
|
|
|
.uni-close-bottom {
|
|
margin: auto;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.uni-close-right {
|
|
right: -60upx;
|
|
top: -80upx;
|
|
}
|
|
|
|
/* .uni-close-bottom:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 0px;
|
|
border: 1px #f5f5f5 solid;
|
|
top: -200upx;
|
|
bottom: 56upx;
|
|
left: 50%;
|
|
transform: translate(-50%, -0%);
|
|
opacity: 0.8;
|
|
} */
|
|
|
|
.uni-popup-top,
|
|
.uni-popup-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.uni-popup-top {
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100upx;
|
|
line-height: 100upx;
|
|
text-align: center;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.uni-popup-bottom {
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
min-height: 100upx;
|
|
line-height: 100upx;
|
|
text-align: center;
|
|
}
|
|
</style>
|