Ci2Order.vue/App/components/z-select-popup/z-select-popup.vue

<template>
	<view >
		<view class="mask" @click="clickmask" @touchmove.stop.prevent="moveHandle" v-if="visible"></view>
		<view class="z-select-popup" v-if="visible" :class="[{'animate_show':visible}]">
			<view class="z-select-popup-top">
				<slot></slot>
			</view>
			<view class="z-select-popup-bottom mt-20" @click="cancel">{{doText}}</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		name:'z-select-popup',
		props:{
			visible:Boolean,
			doText:{
				type:String,
				default:'取消'
			}
		},
		watch:{
			visible(newval,oldval){
				console.log(newval)
				if(newval){
					this.hideAnimate=false;
				}else{
					this.hideAnimate=true;
					// this.cleartime=setTimeout(()=>{
						this.$emit('update:visible', false);
					// },300)
				}
			}
		},
		data(){
			return{
				showAnimate:false,
				hideAnimate:true,
				isvisible:false,
				cleartime:''
			}
		},
		methods:{
			moveHandle(){},
			cancel(){
				this.$emit('update:visible', false);
				console.log(this.visible)
				this.$emit('cancel');
			},
			clickmask(){
				this.$emit('clickmask')
			}
		},
		beforeDestroy(){
				
			this.hideAnimate=true;
			this.$emit('update:visible', false);
			// this.isvisible=false; 
			// clearTimeout(this.cleartime);
		}
	}
</script>

<style scoped lang="scss">
	@keyframes show{
		0%{
			bottom: -100%;
		}
		100%{
			bottom: 30rpx;
		}
	}
	@keyframes hide{
		0%{
			bottom: 30rpx;
		}
		100%{
			bottom: -100%;
		}
	}
	.animate_show {
		animation: show .5s;
		animation-fill-mode: forwards;
	}
	
	.animate_hide {
		animation: hide .5s;
		animation-fill-mode: forwards;
	}
	.mask{
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.3);
		width: 100%;
		height: 100%;
		z-index: 510;
	}
	.z-select-popup{
		position: fixed;
		width: 690rpx;
		left: 30rpx;
		z-index: 600;
		.z-select-popup-top,.z-select-popup-bottom{
			line-height: 100rpx;
			border-radius: 20rpx;
			background: white;
			font-size: 32rpx;
			color: #4179bf;
			text-align: center;
		}
	}
</style>