dreamland/pages/dream/test.vue

<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<view class="grace-list-items">
				<view class="grace-list-body grace-border-b">
					<view class="grace-list-title" @tap="showDrawer1">
						<text class="grace-list-title-text">左侧抽屉</text>
						<text  class="grace-list-title-desc">点击测试</text>
					</view>
				</view>
				<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
			</view>
			<view class="grace-list-items">
				<view class="grace-list-body grace-border-b">
					<view class="grace-list-title" @tap="showDrawer2">
						<text class="grace-list-title-text">右侧抽屉</text>
						<text  class="grace-list-title-desc">点击测试</text>
					</view>
				</view>
				<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
			</view>
			<!-- 抽屉组件 左侧 -->
			<graceDrawer :show="show1" top="0" width="100%" v-on:closeDrawer="closeDrawer1">
				<view slot="links">
					<view class="grace-list">
						<view class="grace-list-items">
							<text class="grace-list-icon grace-icons icon-comments grace-blue"></text>
							<view class="grace-list-body grace-border-b">
								<view class="grace-list-title" @tap="fun1">
									<text class="grace-list-title-text">功能菜单</text>
								</view>
							</view>
						</view>
						<view class="grace-list-items">
							<text class="grace-list-icon grace-icons icon-set grace-blue"></text>
							<view class="grace-list-body grace-border-b">
								<view class="grace-list-title" @tap="fun2">
									<text class="grace-list-title-text">功能菜单</text>
								</view>
							</view>
						</view>
						<view style="text-align:center; padding:20px;">
							您可以放置任何内容 ...
						</view>
					</view>
				</view>
			</graceDrawer>
			<!-- 抽屉组件 右侧 -->
			<graceDrawer :show="show2" v-on:closeDrawer="closeDrawer2" direction="right">
				<view slot="links">
					<view class="grace-list">
						<view class="grace-list-items">
							<text class="grace-list-icon grace-icons icon-comments grace-blue"></text>
							<view class="grace-list-body grace-border-b">
								<view class="grace-list-title" @tap="fun3">
									<text class="grace-list-title-text">功能菜单</text>
								</view>
							</view>
						</view>
						<view class="grace-list-items">
							<text class="grace-list-icon grace-icons icon-set grace-blue"></text>
							<view class="grace-list-body grace-border-b">
								<view class="grace-list-title" @tap="fun4">
									<text class="grace-list-title-text">功能菜单</text>
								</view>
							</view>
						</view>
						<view style="text-align:center; padding:20px;">
							您可以放置任何内容 ...
						</view>
					</view>
				</view>
			</graceDrawer>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "@/lib/graceUI/components/gracePage.vue";
import graceDrawer from '@/lib/graceUI/components/graceDrawer.vue';
export default {
    data() {
    	return {
			show1 : false,
			show2 : false
		}
    },
	methods:{
		// 左侧
		showDrawer1 : function(){
			this.show1 = true;
		},
		closeDrawer1 : function(){
			this.show1 = false;
		},
		fun1 : function(){
			this.closeDrawer1();
			uni.showToast({title:"您点击了第1个导航", icon:"none"})
		},
		fun2 : function(){
			this.closeDrawer1();
			uni.showToast({title:"您点击了第2个导航", icon:"none"})
		},
		// 右侧
		showDrawer2 : function(){
			this.show2 = true;
		},
		closeDrawer2 : function(){
			this.show2 = false;
		},
		fun3 : function(){
			this.closeDrawer2();
			uni.showToast({title:"您点击了第1个导航", icon:"none"})
		},
		fun4 : function(){
			this.closeDrawer2();
			uni.showToast({title:"您点击了第2个导航", icon:"none"})
		},
	},
	components:{
		gracePage, graceDrawer
	}
}
</script>
<style>

</style>