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 class="scroll-content">
			<!-- 	<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>