Ci2Order.vue/App/components/z-slide/z-slide.vue

<template>
	<view class="z-slide" :class="visible?'mask':'mask1'" @click.self="close">
		<view class="slidecard shadow-2" :animation="animationData">
			<view class="slidecard_top flex-n fjb">
				<view class="slidecard_title">{{title}}</view>
				<view class="slidecard_close" @click="close">×</view>
			</view>
			<view class="slidecard_content">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'z-slide',
		props:{
			title:{
				type:String,
				default:'数据筛选'
			},
			visible:Boolean
		},
		data(){
			return{
				 animationData: {},
			}
		},
		watch:{
			visible(newval,oldval){
				if(newval){
					this.open();
				}
			}
		},
		methods:{
			open(){
				var animation = uni.createAnimation({
				      duration: 500,
				       timingFunction: 'ease',
				    })
				animation.right('0').step();
				this.animationData = animation.export();
			},
			close(){
				var animation = uni.createAnimation({
				      duration: 500,
				        timingFunction: 'ease',
				    })
				animation.right('-80vw').step();
				this.animationData = animation.export();
				setTimeout(()=>{
					this.$emit('update:visible', false);
				},500)
			}
		}
	}
</script>

<style scoped lang="scss">
	.mask1{
		// width: 0;
		// height: 0;
		// z-index: 600;
	}
	.mask{
		background: rgba(0,0,0,0.1);
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 600;
	}
	.z-slide{
		.slidecard{
			width: 80vw;
			height: 100vh;
			position: fixed;
			right: -80vw;
			background: white;
			.slidecard_top{
				line-height: 100rpx;
				padding: 0 40rpx;
				.slidecard_title{
					font-size: 36rpx;
					color: #555555;
					font-weight: bold;
				}
				border-bottom: 1px solid #ccc;
				.slidecard_close{
					font-size: 80rpx;
					color: #ccc;
				}
			}
		}
	}
</style>