Merge pull request #613 from wangyuan0108/docs/drawer

docs: drawer代码演示

src/drawer/README.md

@@ -18,9 +18,11 @@ isComponent: true
 ## 代码演示
 
 ### 基础抽屉
-```html
-<t-drawer visible="{{visible}}" sidebar="{{sidebar}}" bind:sidebar-item = "getSidebarItem"></t-drawer>
-```
+{{ base }}
+
+### 带图标的抽屉
+{{ icon-drawer }}
+
 >Drawer的 `visible` 是受控的，需要手动设置 `visible` 为 `true` 才会开启抽屉
 
 

src/drawer/_example/base/index.js

@@ -0,0 +1,51 @@
+Component({
+  data: {
+    placement: 'left',
+    baseSidebar: [
+      {
+        title: '菜单一',
+      },
+      {
+        title: '菜单二',
+      },
+      {
+        title: '菜单三',
+      },
+      {
+        title: '菜单四',
+      },
+      {
+        title: '菜单五',
+      },
+      {
+        title: '菜单六',
+      },
+      {
+        title: '菜单七',
+      },
+      {
+        title: '菜单八',
+      },
+    ],
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    openDrawerBase() {
+      this.setData({
+        visible: true,
+        sidebar: this.data.baseSidebar,
+      });
+    },
+
+    itemClick(e) {
+      console.log(e.detail);
+    },
+
+    overlayClick(e) {
+      console.log(e.detail);
+    },
+  },
+});

src/drawer/_example/base/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

src/drawer/_example/base/index.wxml

@@ -0,0 +1,8 @@
+<t-button variant="plain" bind:tap="openDrawerBase" block>基础抽屉</t-button>
+<t-drawer
+  visible="{{visible}}"
+  placement="{{placement}}"
+  items="{{sidebar}}"
+  bind:overlay-click="overlayClick"
+  bind:item-click="itemClick"
+></t-drawer>

src/drawer/_example/drawer.json

@@ -2,6 +2,8 @@
   "navigationBarTitleText": "Drawer",
   "navigationBarBackgroundColor": "#fff",
   "usingComponents": {
-    "t-demo": "../../components/demo-block/index"
+    "t-demo": "../../components/demo-block/index",
+    "base": "./base",
+    "icon-drawer": "./icon-drawer"
   }
 }

src/drawer/_example/drawer.ts

@@ -1,88 +1 @@
-Page({
-  data: {
-    placement: 'left',
-    sidebar: [],
-    baseSidebar: [
-      {
-        title: '菜单一',
-      },
-      {
-        title: '菜单二',
-      },
-      {
-        title: '菜单三',
-      },
-      {
-        title: '菜单四',
-      },
-      {
-        title: '菜单五',
-      },
-      {
-        title: '菜单六',
-      },
-      {
-        title: '菜单七',
-      },
-      {
-        title: '菜单八',
-      },
-    ],
-    iconSidebar: [
-      {
-        title: '菜单一',
-        icon: 'app',
-      },
-      {
-        title: '菜单二',
-        icon: 'app',
-      },
-      {
-        title: '菜单三',
-        icon: 'app',
-      },
-      {
-        title: '菜单四',
-        icon: 'app',
-      },
-      {
-        title: '菜单五',
-        icon: 'app',
-      },
-      {
-        title: '菜单六',
-        icon: 'app',
-      },
-      {
-        title: '菜单七',
-        icon: 'app',
-      },
-      {
-        title: '菜单八',
-        icon: 'app',
-      },
-    ],
-  },
-
-  openDrawerBase() {
-    this.setData({
-      visible: true,
-      sidebar: this.data.baseSidebar,
-    });
-  },
-
-  openDrawerIcon() {
-    this.setData({
-      visible: true,
-      sidebar: this.data.iconSidebar,
-    });
-  },
-
-  itemClick(e) {
-    console.log(e.detail);
-  },
-
-  overlayClick(e) {
-    console.log(e.detail);
-  },
-});
+Page({});

src/drawer/_example/drawer.wxml

@@ -2,23 +2,12 @@
   <view class="demo-title">Drawer 弹出层</view>
   <view class="demo-desc">用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。</view>
   <view class="tdesign-demo-popup">
-    <t-drawer
-      visible="{{visible}}"
-      placement="{{placement}}"
-      items="{{sidebar}}"
-      bind:overlay-click="overlayClick"
-      bind:item-click="itemClick"
-    ></t-drawer>
     <t-demo title="01 类型">
       <view class="demo-section__desc">基础抽屉</view>
-      <view class="box">
-        <t-button variant="plain" bind:tap="openDrawerBase" block>基础抽屉</t-button>
-      </view>
+      <base />
 
       <view class="demo-section__desc">带图标抽屉</view>
-      <view class="box">
-        <t-button variant="plain" block bind:tap="openDrawerIcon">带图标抽屉</t-button>
-      </view>
+      <icon-drawer />
     </t-demo>
   </view>
 </view>

src/drawer/_example/icon-drawer/index.js

@@ -0,0 +1,59 @@
+Component({
+  data: {
+    placement: 'left',
+    iconSidebar: [
+      {
+        title: '菜单一',
+        icon: 'app',
+      },
+      {
+        title: '菜单二',
+        icon: 'app',
+      },
+      {
+        title: '菜单三',
+        icon: 'app',
+      },
+      {
+        title: '菜单四',
+        icon: 'app',
+      },
+      {
+        title: '菜单五',
+        icon: 'app',
+      },
+      {
+        title: '菜单六',
+        icon: 'app',
+      },
+      {
+        title: '菜单七',
+        icon: 'app',
+      },
+      {
+        title: '菜单八',
+        icon: 'app',
+      },
+    ],
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    openDrawerIcon() {
+      this.setData({
+        visible: true,
+        sidebar: this.data.iconSidebar,
+      });
+    },
+
+    itemClick(e) {
+      console.log(e.detail);
+    },
+
+    overlayClick(e) {
+      console.log(e.detail);
+    },
+  },
+});

src/drawer/_example/icon-drawer/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

src/drawer/_example/icon-drawer/index.wxml

@@ -0,0 +1,8 @@
+<t-button variant="plain" block bind:tap="openDrawerIcon">带图标抽屉</t-button>
+<t-drawer
+  visible="{{visible}}"
+  placement="{{placement}}"
+  items="{{sidebar}}"
+  bind:overlay-click="overlayClick"
+  bind:item-click="itemClick"
+></t-drawer>