|
@@ -1,127 +0,0 @@
|
|
|
-<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>
|