add Drawer

view-design · Jun 4, 2018 · 7688c68 · 7688c68
1 parent 3d89e9e
commit 7688c68
Show file tree

Hide file tree

Showing 3 changed files with 176 additions and 0 deletions.
diff --git a/src/code/drawer.js b/src/code/drawer.js
@@ -0,0 +1,69 @@
+let code = {};
+
+code.import = `
+"usingComponents": {
+    "i-drawer": "../../dist/drawer/index"
+}
+`;
+code.usage = `
+<i-button bind:click="toggleLeft1" type="ghost">左边弹出1</i-button>
+<i-button bind:click="toggleLeft2" type="primary">左边弹出2</i-button>
+<i-button bind:click="toggleRight1" type="ghost">右边弹出1</i-button>
+<i-button bind:click="toggleRight2" type="primary">右边弹出2</i-button>
+<i-drawer mode="left" visible="{{showLeft1}}" bind:close="toggleLeft1">
+    <view class="demo-container">
+        单击遮罩层关闭
+    </view>
+</i-drawer>
+<i-drawer mode="left" visible="{{showLeft2}}" mask-closable="{{false}}">
+    <view class="demo-container">
+        禁止单击遮罩关闭
+        <i-button bind:click="toggleLeft2" type="primary">关闭</i-button>
+    </view>
+</i-drawer>
+<i-drawer mode="right" visible="{{showRight1}}" bind:close="toggleRight1">
+    <view class="demo-container">
+        单击遮罩层关闭
+    </view>
+</i-drawer>
+<i-drawer mode="right" visible="{{showRight2}}" mask-closable="{{false}}">
+    <view class="demo-container">
+        禁止单击遮罩关闭
+        <i-button bind:click="toggleRight2" type="primary">关闭</i-button>
+    </view>
+</i-drawer>
+`;
+
+code.js = `
+Page({
+    data: {
+        showLeft1: false,
+        showLeft2: false,
+        showRight1: false,
+        showRigh2: false,
+    },
+    toggleLeft1() {
+        this.setData({
+            showLeft1: !this.data.showLeft1
+        });
+    },
+    toggleLeft2() {
+        this.setData({
+            showLeft2: !this.data.showLeft2
+        });
+    },
+    toggleRight1() {
+        this.setData({
+            showRight1: !this.data.showRight1
+        });
+    },
+    toggleRight2() {
+        this.setData({
+            showRight2: !this.data.showRight2
+        });
+    }
+});
+
+`;
+
+export default code;
diff --git a/src/router.js b/src/router.js
@@ -93,6 +93,13 @@ const routers = [
         },
         component: (resolve) => require(['./views/components/tabs.vue'], resolve)
     },
+    {
+        path: '/components/drawer',
+        meta: {
+            title: '抽屉 Drawer'
+        },
+        component: (resolve) => require(['./views/components/drawer.vue'], resolve)
+    },
     {
         path: '*',
         redirect: '/'

diff --git a/src/views/components/drawer.vue b/src/views/components/drawer.vue
@@ -0,0 +1,100 @@
+<template>
+    <i-article>
+        <article>
+            <h1>Drawer 抽屉</h1>
+            <Anchor title="使用指南" h2></Anchor>
+            <p>在 .json 中引入组件</p>
+            <i-code bg lang="json">{{ code.import }}</i-code>
+            <Anchor title="示例" h2></Anchor>
+            <i-code bg lang="html">{{ code.usage }}</i-code>
+            <br><br>
+            <i-code bg lang="js">{{ code.js }}</i-code>
+            <ad></ad>
+
+            <div class="api">
+                <Anchor title="API" h2></Anchor>
+                <Anchor title="Drawer properties" h3></Anchor>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>属性</th>
+                            <th>说明</th>
+                            <th>类型</th>
+                            <th>默认值</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>i-class</td>
+                            <td>自定义 class 类名</td>
+                            <td>String</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>visible</td>
+                            <td>是否显示组件</td>
+                            <td>String</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>mode</td>
+                            <td>显示位置，可选值为 left 和 right</td>
+                            <td>String</td>
+                            <td>left</td>
+                        </tr>
+                        <tr>
+                            <td>mask</td>
+                            <td>是否显示遮罩层</td>
+                            <td>Boolean</td>
+                            <td>true</td>
+                        </tr>
+                        <tr>
+                            <td>mask-closable</td>
+                            <td>是否允许点击遮罩层关闭</td>
+                            <td>Boolean</td>
+                            <td>true</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <Anchor title="Drawer events" h3></Anchor>
+                <table>
+                    <thead>
+                    <tr>
+                        <th>事件名</th>
+                        <th>说明</th>
+                        <th>返回值</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>bind:close</td>
+                        <td>关闭时触发</td>
+                        <td>-</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </article>
+    </i-article>
+</template>
+<script>
+    import iArticle from '../../components/article.vue';
+    import iCode from 'iCode';
+    import Demo from '../../components/demo.vue';
+    import Code from '../../code/drawer';
+    import Anchor from '../../components/anchor.vue';
+
+    export default {
+        components: {
+            iArticle,
+            iCode,
+            Demo,
+            Anchor
+        },
+        data () {
+            return {
+                code: Code
+            }
+        }
+    }
+</script>