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

<template>
	<view class="z-slide-card" @touchmove.stop.prevent="moveHandle">
		<view class="scroll-area" :class="[{'animate_show':visible}]">
			<view class="top_bar flex-n fac fjb plr-30">
				<view class="iconfanhui iconfont go_back" style="text-align: left;" @click="back"></view>
				<view class="title">
					{{title}}
				</view>
				<view class="rightbtn" @click="rightBtnClick">{{rightBtnText}}</view>
			</view>
		<scroll-view scroll-y >
			
			<view class="scroll-content">
				
				<slot></slot>
			</view>
		</scroll-view>
</view>
	</view>
</template>

<script>
	export default {
		name: 'z-slide-card',
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			title:String,
			rightBtnText:String,
			
		},
		data() {
			return {
				visiblehide: true,
			}
		},
		watch: {
			visible(newValue, oldValue) {
				if (newValue) {
					this.visiblehide = false;
				}
			},
		},
		methods: {
			//禁止触发后面移动
			moveHandle() {},
			rightBtnClick(){
				// this.visiblehide = true;
				this.$emit('rightClick');
				// this.$emit('update:visible', false)
			},
			close(){
				this.visiblehide = true;
				this.$emit('update:visible', false);
			},
			back() {
				this.visiblehide = true;
				this.$emit('beforeClose');
				this.$emit('update:visible', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes show{
		0%{
			left: 100%;
		}
		100%{
			left: 0;
		}
	}
	@keyframes hide{
		0%{
			left: 0;
		}
		100%{
			left: 100%;
		}
	}
	.z-slide-card {
		text-align: left !important;
position: relative;
		.scroll-area {
			width: 100vw;
			height: 100vh;
			position: fixed;
			// overflow-y: scroll;
			background: white;
			z-index: 501;
			left: 100%;
			top: 0;
		}

		.animate_show {
			animation: show .5s;
			animation-fill-mode: forwards;
		}

		.animate_hide {
			animation: hide .5s;
			animation-fill-mode: forwards;
		}

		.scroll-content {
			height: calc(100% - 98rpx);
			position: relative;
		}

	}
	.top_bar{
			height: 98rpx;
			background: #354054;
			color: white;
			font-size: 36rpx;
			.go_back {
				color: white;
				width: 30rpx;
				font-size: 30rpx;
				height: 30rpx;
			}
			.rightbtn{
				font-size: 28rpx;
			}
		}
	
</style>