eduepos_ui_store/components/drawer/drawer.vue

<template>
	<view :class="['side-nav',{'right':direction == 'right'},{'left':direction == 'left'},{'show':show}]">
		<view class="item">
			<view class="body">
				<slot />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			direction: {
				type: String,
				default: 'right'
			}
		},
		data() {
			return {}
		},
		onLoad() {

		},
		methods: {
			month() {
				this.$emit('month');
			},
		}

	}
</script>

<style lang="less">
	/* flex */
	.flex-box {
		display: flex;
		flex-wrap: wrap;
	}

	.flex-box>.item-2 {
		flex: 0 0 50%;
	}

	.side-nav {
		position: fixed;
		z-index: 99;
		right: 0;
		top: 180upx;
		height: 400upx;
		width: 300upx;
		overflow-x: hidden;
		transition: 0.5s;
		display: flex;
		flex-direction: column;
		color: #fff;
		&.right{
			transform: translateX(600upx);
			&.show {
				transform: translateX(0);
			}
			
		}
		
		&.left{
			transform: translateX(-600upx);
			&.show {
				transform: translateX(300upx);
			}
		}

	
		.body {
			height: 100%;
			overflow-y: auto;
		}


		.item:nth-of-type(1) {
			height: 0;
		}

		.item:nth-of-type(1) {
			flex: 1 0 auto;
		}


		.action-area {
			.item-2 {
				button {
					border-radius: 0;
					line-height: 96upx;
				}
			}
		}
	}



	/* #ifdef H5 */
	.side-nav {
		box-sizing: border-box;
	}

	/* #endif */
</style>