uniapp组件-uni-drawer抽屉

官方示例：https://ext.dcloud.net.cn/plugin?id=26

抽屉式导航，用于展示侧滑菜单，侧滑导航。

例1：

这里的width属性可能会失效，具体参见官方示例

<template>
	<view>
		<button @click="showDrawer" type="primary">左侧弹出 显示Drawer</button>
		<uni-drawer ref="showLeft" :width="320" mode="left">
			<button @click="closeDrawer">关闭Drawer</button>
		</uni-drawer>
	</view>
</template>
<script>
export default {
	data() {
		return {
		};
	},
	methods: {
		showDrawer() {
			this.$refs["showLeft"].open();
		},
		closeDrawer() {
			this.$refs["showLeft"].close();
		}
	}
};
</script>

例2：

这里只能通过按钮关闭，不能通过点击遮罩关闭

<template>
	<view>
		<button @click="showDrawer" type="primary">右侧弹出 显示Drawer</button>
		<uni-drawer ref="showRight" mode="right" :mask-click="false">
			<scroll-view class="scroll-view-box" scroll-y="true">
				<button @click="closeDrawer" type="primary">关闭Drawer</button>
				<view v-for="item in 30" :key="item">可滚动内容 {{ item }}</view>
			</scroll-view>
		</uni-drawer>
	</view>
</template>
<script>
export default {
	data() {
		return {};
	},
	methods: {
		showDrawer() {
			this.$refs['showRight'].open();
		},
		closeDrawer() {
			this.$refs['showRight'].close();
		}
	}
};
</script>

<style>
.scroll-view-box {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
</style>