|
|
<template>
|
|
|
<view class="tm-poups " @click.stop="">
|
|
|
|
|
|
<block v-if="position_sv != 'center'">
|
|
|
<view v-show="value==true&&position_sv != 'center'" class="tm-poup " :class="[
|
|
|
isFilter?'blur':'',
|
|
|
position_sv == 'center' ? 'tm-poup-center' : '',
|
|
|
position_sv !='center'?position_sv:'',
|
|
|
isClickbled?'isClickbled':''
|
|
|
]" @click.stop.prevent="overClick" @touchmove.stop.prevent="stopMove" :style="{
|
|
|
backgroundColor: overColor,
|
|
|
width:'100%',height:'100%'
|
|
|
}">
|
|
|
<!-- 内容 -->
|
|
|
<!-- <view class="tm-poup-wk bottom">{{ show ? 'on' : 'off'}}</view> -->
|
|
|
<scroll-view :animation="aniData" @click.stop.prevent="" class="tm-poup-wk dhshiKa" scroll-y="true" :class="[
|
|
|
position_sv == 'top'?'round-b-' + round:'',
|
|
|
position_sv == 'bottom'?'round-t-' + round:'',
|
|
|
position_sv, aniOn ? 'on ' : 'off',
|
|
|
black_tmeme ? 'grey-darken-5 bk' : bgColor
|
|
|
]" :style="{
|
|
|
width: (position_sv == 'top' || position_sv == 'bottom') ? '100%' : width_w,
|
|
|
height: position_sv == 'right' || position_sv == 'left' ?'100%' : height_h,
|
|
|
|
|
|
}">
|
|
|
<view :class="[clssStyle]" >
|
|
|
<slot></slot>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
<view class="bottomHeight"></view>
|
|
|
</block>
|
|
|
|
|
|
<view v-if="value===true&&position_sv == 'center'" class="tm-poup " :class="[
|
|
|
isFilter?'blur':'',
|
|
|
position_sv == 'center' ? 'tm-poup-center' : ''
|
|
|
]" @click="overClick" @touchmove.stop.prevent="stopMove" :style="{
|
|
|
backgroundColor: overColor,
|
|
|
width:sysInfo.screenWidth+'px',height:'100%'
|
|
|
}">
|
|
|
<!-- 内容 -->
|
|
|
<scroll-view :animation="aniData" @click.stop.prevent="" class="tm-poup-wk " scroll-y="true" :class="[
|
|
|
`round-${round}`,aniOn ? 'on' : 'off', position_sv,
|
|
|
black_tmeme ? 'grey-darken-5 bk' : bgColor
|
|
|
]" :style="{
|
|
|
width: width_w,
|
|
|
height: height_h
|
|
|
}">
|
|
|
<view :class="[clssStyle]">
|
|
|
<slot></slot>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
/**
|
|
|
* poup弹出层
|
|
|
* @description poup弹出层，上下，左右方向。
|
|
|
* @property {Boolean} value = [true|false] 使用时value.sync可同步，也可不同步。等同于v-model
|
|
|
* @property {Boolea} v-model 显示和关闭。
|
|
|
* @property {String} position = [bottom|top|left|right|center] 方向可选bottom,left,right,top,center
|
|
|
* @property {Function} change 改变时会调用此函数，参数e等同于v-model和value
|
|
|
* @property {String|Number} width 宽，位置为left,right是起作用。可以是30%或者数字(单位upx)
|
|
|
* @property {String|Number} height 宽，位置为top,bottom是起作用。可以是30%或者数字(单位upx)
|
|
|
* @property {String|Number} round 圆角0-25
|
|
|
* @property {String|Boolean} black = [true|false] 暗黑模式
|
|
|
* @property {Boolean} over-close = [true|false] 是否点击遮罩关闭。
|
|
|
* @property {Boolean} is-filter = [true|false] 是否背景模糊
|
|
|
* @property {String} clss-style = [] 自定内容的类
|
|
|
* @property {String} bg-color = [white|blue] 默认：white,白色背景；请填写背景的主题色名称。
|
|
|
* @property {String} over-color = [] 默认：rgba(0,0,0,0.3), 遮罩层颜色值不是主题。
|
|
|
* @example <tm-poup height="85%" v-model="show"></tm-poup>
|
|
|
*/
|
|
|
export default {
|
|
|
name: 'tm-poup',
|
|
|
props: {
|
|
|
bgColor: {
|
|
|
type: String,
|
|
|
default: 'white'
|
|
|
},
|
|
|
// 遮罩层颜色。
|
|
|
overColor: {
|
|
|
type: String,
|
|
|
default: 'rgba(0,0,0,0.3)'
|
|
|
},
|
|
|
black: {
|
|
|
type: Boolean | String,
|
|
|
default: null
|
|
|
},
|
|
|
clssStyle: {
|
|
|
type: String,
|
|
|
default: ''
|
|
|
},
|
|
|
value: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
// bottom,left,right,top
|
|
|
position: {
|
|
|
type: String,
|
|
|
default: 'bottom'
|
|
|
},
|
|
|
round: {
|
|
|
type: String | Number,
|
|
|
default: '10'
|
|
|
},
|
|
|
width: {
|
|
|
type: String | Number,
|
|
|
default: '30%'
|
|
|
},
|
|
|
height: {
|
|
|
type: String | Number,
|
|
|
default: 220
|
|
|
},
|
|
|
overClose: {
|
|
|
type: Boolean,
|
|
|
default: true
|
|
|
},
|
|
|
isFilter: {
|
|
|
type: Boolean,
|
|
|
default: true,
|
|
|
},
|
|
|
//允许穿透背景遮罩。
|
|
|
isClickbled: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
}
|
|
|
},
|
|
|
model: {
|
|
|
prop: 'value',
|
|
|
event: 'input',
|
|
|
sysInfo: {},
|
|
|
},
|
|
|
watch: {
|
|
|
value:function(val){
|
|
|
this.$emit('change', val);
|
|
|
if(val){
|
|
|
this.open()
|
|
|
}else{this.close()}
|
|
|
},
|
|
|
position: function() {
|
|
|
this.position_sv = this.position
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.sysInfo = uni.getSystemInfoSync();
|
|
|
},
|
|
|
computed: {
|
|
|
black_tmeme: function() {
|
|
|
if (this.black !== null) return this.black;
|
|
|
return this.$tm.vx.state().tmVuetify.black;
|
|
|
},
|
|
|
width_w: function() {
|
|
|
let w = this.$TestUnit(this.width);
|
|
|
let i = w.value;
|
|
|
if (w.type == 'number') {
|
|
|
i = w.value + 'px';
|
|
|
}
|
|
|
return i;
|
|
|
},
|
|
|
height_h: function() {
|
|
|
let w = this.$TestUnit(this.height);
|
|
|
let i = w.value;
|
|
|
if (w.type == 'number') {
|
|
|
i = w.value + 'px';
|
|
|
}
|
|
|
return i;
|
|
|
},
|
|
|
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
aniOn: false,
|
|
|
closeTimid: null,
|
|
|
position_sv: this.position,
|
|
|
dhshiKa:true,//是否结束动画
|
|
|
aniData:null,
|
|
|
timdiiid:6369784254,
|
|
|
|
|
|
};
|
|
|
},
|
|
|
deactivated() {
|
|
|
clearTimeout(this.closeTimid)
|
|
|
},
|
|
|
destroyed() {
|
|
|
clearTimeout(this.closeTimid)
|
|
|
},
|
|
|
mounted() {
|
|
|
if(this.value){
|
|
|
this.open()
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
overClick() {
|
|
|
if (!this.overClose) return;
|
|
|
this.close();
|
|
|
},
|
|
|
close() {
|
|
|
let t = this;
|
|
|
clearTimeout(this.timdiiid)
|
|
|
this.dhshiKa=false;
|
|
|
t.aniOn=false;
|
|
|
this.createBtT(this.position_sv,'off').then(()=>{
|
|
|
t.$emit('input', false);
|
|
|
t.closeTimid = null;
|
|
|
t.dhshiKa = true;
|
|
|
// t.$emit('change', false);
|
|
|
// console.log('off');
|
|
|
})
|
|
|
},
|
|
|
open() {
|
|
|
let t = this;
|
|
|
clearTimeout(this.timdiiid)
|
|
|
|
|
|
|
|
|
this.dhshiKa=false
|
|
|
this.aniOn=true;
|
|
|
|
|
|
this.createBtT(this.position_sv,'on').then(()=>{
|
|
|
t.dhshiKa=true
|
|
|
|
|
|
t.isclick=false
|
|
|
// console.log('on');
|
|
|
})
|
|
|
|
|
|
},
|
|
|
//下至上。
|
|
|
createBtT(pos,type){
|
|
|
let t = this;
|
|
|
this.aniData = '';
|
|
|
let aniData = uni.createAnimation({
|
|
|
duration:240,
|
|
|
timingFunction: 'ease',
|
|
|
})
|
|
|
this.aniData = aniData;
|
|
|
if(pos=='bottom'){
|
|
|
if(type=='on'){
|
|
|
aniData.translateY('0%').step();
|
|
|
this.aniData = aniData.export()
|
|
|
|
|
|
}
|
|
|
if(type=='off'){
|
|
|
aniData.translateY('100%').step();
|
|
|
this.aniData = aniData.export()
|
|
|
|
|
|
}
|
|
|
}else if(pos=='top'){
|
|
|
if(type=='on'){
|
|
|
aniData.translateY('0%').step();
|
|
|
this.aniData = aniData.export()
|
|
|
|
|
|
}
|
|
|
if(type=='off'){
|
|
|
aniData.translateY('-100%').step();
|
|
|
this.aniData = aniData.export()
|
|
|
|
|
|
}
|
|
|
}else if(pos=='left'){
|
|
|
if(type=='on'){
|
|
|
aniData.translateX('0%').step();
|
|
|
this.aniData = aniData.export()
|
|
|
|
|
|
}
|
|
|
if(type=='off'){
|
|
|
aniData.translateX('-100%').step();
|
|
|
this.aniData = aniData.export()
|
|
|
|
|
|
}
|
|
|
}else if(pos=='right'){
|
|
|
if(type=='on'){
|
|
|
aniData.translateX('0%').step();
|
|
|
this.aniData = aniData.export()
|
|
|
|
|
|
}
|
|
|
if(type=='off'){
|
|
|
aniData.translateX('100%').step();
|
|
|
this.aniData = aniData.export()
|
|
|
|
|
|
}
|
|
|
}else if(pos=='center'){
|
|
|
|
|
|
if(type=='on'){
|
|
|
aniData.opacity(1).scale(1).step();
|
|
|
this.aniData = aniData.export()
|
|
|
|
|
|
}
|
|
|
if(type=='off'){
|
|
|
aniData.opacity(0).scale(0.6).step();
|
|
|
this.aniData = aniData.export()
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return new Promise(res=>{
|
|
|
t.timdiiid = setTimeout(()=>{
|
|
|
t.aniData = null;
|
|
|
res();
|
|
|
},240)
|
|
|
})
|
|
|
},
|
|
|
stopMove(e) {}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.bottomHeight{
|
|
|
height: var(--window-bottom);
|
|
|
}
|
|
|
.tm-poup {
|
|
|
position: fixed;
|
|
|
z-index: 452;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
min-height: 100%;
|
|
|
min-width: 100%;
|
|
|
overflow: hidden;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
|
|
|
&.isClickbled {
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
&.okkk{
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
&.blur {
|
|
|
backdrop-filter: blur(3px);
|
|
|
}
|
|
|
|
|
|
&.on {
|
|
|
animation: opta 1s ease;
|
|
|
}
|
|
|
|
|
|
&.off {
|
|
|
animation: opta_off 0.24s ease;
|
|
|
}
|
|
|
.tm-poup-wk {
|
|
|
position: absolute;
|
|
|
overflow: hidden;
|
|
|
pointer-events: auto;
|
|
|
// transition: all 0.3s;
|
|
|
&.bottom {
|
|
|
transform: translateY(100%);
|
|
|
width: 100%;
|
|
|
bottom: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
&.top {
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
transform: translateY(-100%);
|
|
|
}
|
|
|
|
|
|
&.left {
|
|
|
top: 0;
|
|
|
transform: translateX(-100%);
|
|
|
border-radius: 0 !important;
|
|
|
left: 0;
|
|
|
}
|
|
|
|
|
|
&.right {
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
transform: translateX(100%);
|
|
|
border-radius: 0 !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
&.center {
|
|
|
opacity:0;
|
|
|
transform: scale(0.6);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.tm-poup-center {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
align-content: center;
|
|
|
|
|
|
|
|
|
.tm-poup-wk {
|
|
|
position: static;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes opta {
|
|
|
from {
|
|
|
opacity: 0.3;
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes opta_off {
|
|
|
from {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes bottomTtop {
|
|
|
from {
|
|
|
transform: translateY(100%);
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
transform: translateY(0%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes bottomTtop_off {
|
|
|
from {
|
|
|
transform: translateY(0%);
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
transform: translateY(100%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes topTbottom {
|
|
|
from {
|
|
|
transform: translateY(-100%);
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes topTbottom_off {
|
|
|
from {
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
transform: translateY(-100%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes leftTright {
|
|
|
from {
|
|
|
transform: translateX(-100%);
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes leftTright_off {
|
|
|
from {
|
|
|
transform: translateX(0);
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
transform: translateX(-100%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes rightTleft {
|
|
|
from {
|
|
|
|
|
|
transform: translateX(100%);
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
transform: translateX(0%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes rightTleft_off {
|
|
|
from {
|
|
|
transform: translateX(0%);
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
transform: translateX(100%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes Centerleft {
|
|
|
from {
|
|
|
transform: scale(0.65);
|
|
|
opacity: 0.3;
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
transform: scale(1);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@keyframes Centerleft_off {
|
|
|
from {
|
|
|
transform: scale(1);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
transform: scale(0.65);
|
|
|
opacity: 0.3;
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</style>
|