c5_labsci/fapp/ciyon_ap/components/ciy-anipop/ciy-anipop.vue

<template>
	<view :animation="anidatamask" class="_mask" @tap="close('mask')" v-if="show" :style="{background:maskbg,zIndex:zindex,opacity:0}"></view>
	<view :animation="anidatapop" ref="_anipop" class="_anipop" v-if="show" :style="popstyle">
		<view class="_anicontent">
			<view v-if="title" class="ciy-caption">
				{{title}}
				<view class="_close" @tap="close('closebtn')">×</view>
			</view>
			<view style="overflow: auto;" :style="{maxHeight:maxheight+'px'}">
				<slot></slot>
			</view>
			<view class="footer_safe" :style="{height:footer_safe_height+'px'}"></view>
		</view>
	</view>
</template>
<style scoped>
	._close {
		position: absolute;
		right: 0.3em;
		font-size: 2em;
		color: var(--txt4);
	}

	._mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	._anipop {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		background: var(--bg2);
	}
</style>
<script>
	export default {
		emits: ['change', 'update:modelValue'],
		props: {
			modelValue: {
				type: Boolean,
				default: false
			},
			noclose: {
				type: Boolean,
				default: false
			},
			direction: {
				type: String,
				default: 'bottom'
			},
			edge: {
				type: [String, Number],
				default: 0
			},
			maskbg: {
				type: String,
				default: ''
			},
			bg: {
				type: String,
				default: '#ffffff'
			},
			title: {
				type: String,
				default: ''
			},
			zindex: {
				type: Number,
				default: 992
			},
			anispeed: {
				type: [String, Number],
				default: 300
			},
		},
		data() {
			return {
				show: false,
				maxheight: 0,
				popstyle: {},
				anidatapop: {},
				anidatamask: {}
			};
		},
		watch: {
			modelValue(newD, oldD) {
				if (newD) {
					this.Open();
				} else {
					this.close('user');
				}
			}
		},
		computed: {},
		mounted() {},
		methods: {
			async Open() {
				this.bclose = false;
				this.pagenoscroll(true);
				const {
					headerheight,
					footerheight
				} = await this.com_gethdft();
				this.show = true;
				var app = getApp();
				var edge = this.toint(this.edge);
				var totalms = this.toint(this.anispeed);
				this.maxheight = (app.globalData._sysinfo.windowHeight - headerheight - this.footer_safe_height);
				if(this.direction != 'left' && this.direction != 'right')
					this.maxheight -= this.edge;
				if (this.title)
					this.maxheight -= 55;
				var mainrect = await this.getrect('._anicontent');
				if (!mainrect)
					return;
				this.popstyle = {
					zIndex: this.zindex
				};
				if (this.direction == 'left') {
					//this.popstyle.transform = 'translateX(-100vw)';
					this.popstyle.background = this.bg;
					this.popstyle.marginTop = headerheight + 'px';
					this.popstyle.marginRight = this.edge + 'px';
					var top = 0;
					this.goani('tx-100vh,op0|tx' + top + 'px,op1,' + totalms, data => this.anidatapop = data);
				} else if (this.direction == 'right') {
					//this.popstyle.transform = 'translateX(100vw)';
					this.popstyle.background = this.bg;
					this.popstyle.marginTop = headerheight + 'px';
					this.popstyle.marginLeft = this.edge + 'px';
					var top = 0;
					this.goani('tx100vh,op0|tx' + top + 'px,op1,' + totalms, data => this.anidatapop = data);
				} else if (this.direction == 'top') {
					//this.popstyle.transform = 'translateY(-100vh)';
					this.popstyle.height = mainrect.height + 'px';
					var top = headerheight;
					this.goani('ty-100vh,op0|ty' + top + 'px,op1,' + totalms, data => this.anidatapop = data);
				} else {
					//this.popstyle.transform = 'translateY(100vh)'; //selcas在异步处理数据时，出现冲突。原因不明
					var top = app.globalData._sysinfo.windowHeight - mainrect.top - mainrect.height - this.footer_safe_height;
					if (top < headerheight + edge) {
						top = headerheight + edge;
					}
					this.goani('ty100vh,op0|ty' + top + 'px,op1,' + totalms, data => this.anidatapop = data);
				}
				this.goani('op0|op0,100|op1,' + totalms, data => this.anidatamask = data);
				this.$emit('change', {
					from: 'open',
					value: true
				});
			},
			close(from) {
				if (this.noclose && from == 'mask')
					return;
				if (from != 'user') {
					this.$emit('update:modelValue', false);
				}
				if (!this.show)
					return;
				if (this.bclose)
					return;
				this.bclose = true;
				this.pagenoscroll(false);
				var totalms = this.toint(this.anispeed);
				if (this.direction == 'left') {
					this.goani('tx-100vw,op0,' + totalms + '|tx0', data => this.anidatapop = data);
				} else if (this.direction == 'right') {
					this.goani('tx100vw,op0,' + totalms + '|tx0', data => this.anidatapop = data);
				} else if (this.direction == 'top') {
					this.goani('ty-100vh,op0,' + totalms + '|ty0', data => this.anidatapop = data);
				} else {
					this.goani('ty100vh,op0,' + totalms + '|ty0', data => this.anidatapop = data);
				}
				this.goani('op0,' + totalms, data => this.anidatamask = data);

				this.$emit('change', {
					from: from,
					value: false
				});
				setTimeout(() => {
					this.show = false;
				}, totalms + 50);
			}
		}
	}
</script>