uniapp/pagesAccount/components/c-drawer.vue

<template>
	<view>
		<uni-drawer ref="drawerShow" :mode="drawer.mode" :maskClick="true" :width="290" @change="drawerChange">
			<view class="drawer">
				<view class="drawer_1">
					<view class="left textOver">
						{{drawer.title||'弹窗'}}
					</view>
					<view class="right">
						<uni-icons type="clear" size="30" @tap="toClose()"></uni-icons>
					</view>
				</view>
				<view class="drawer_2">
					<scroll-view scroll-y="true" class="scroll-view">
						<view class="list-scroll-view">
							<view class="info">
								<slot></slot>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	export default {
		props: {
			drawer: {
				type: Object
			}
		},
		data() {
			return {};
		},
		methods: {
			drawerChange(e) {
				const that = this;
				if (e == false) that.$emit('toClose')
			},
			drawerOpen() {
				const that = this;
				that.$refs.drawerShow.open();
			},
			toClose() {
				const that = this;
				that.$emit('toClose')
			},
			drawerClose() {
				const that = this;
				that.$refs.drawerShow.close();
			}
		},
		watch: {
			drawer(newVal, oldVal) {
				const that = this;
				if (newVal.show == true && oldVal.show == false) that.drawerOpen();
				else if (newVal.show == false && oldVal.show == true) that.drawerClose();
			}
		}
	}
</script>

<style lang="scss">
	.drawer {
		display: flex;
		flex-direction: column;
		width: 77vw;
		height: 100vh;

		.drawer_1 {
			display: flex;
			justify-content: space-between;
			padding: 2vw;

			.left {
				flex-grow: 1;
				font-weight: bold;
				padding: 1vw 0;
				font-size: 16px;
				font-family: monospace;
			}
		}

		.drawer_2 {
			flex-grow: 1;
			position: relative;
			padding: 0 2vw;

			.info {
				padding: 0 2vw;
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
			padding: 0 !important;
		}
	}
</style>