From 749665eee776ecddd45aa8a8b331b8f23f15b5dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Thu, 23 Aug 2018 15:40:26 +0800
Subject: [PATCH] add props

---
 examples/app.vue                 |  1 +
 examples/main.js                 |  4 ++
 examples/routers/drawer.vue      | 75 ++++++++++++++++++++++++++++++++
 src/components/drawer/drawer.vue | 62 ++++++++++++++++++++++++++
 4 files changed, 142 insertions(+)
 create mode 100644 examples/routers/drawer.vue

diff --git a/examples/app.vue b/examples/app.vue
index 4585a6eb..ef605063 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -67,6 +67,7 @@ nav {
                 <li><router-link to="/divider">Divider</router-link></li>
                 <li><router-link to="/time">Time</router-link></li>
                 <li><router-link to="/cell">Cell</router-link></li>
+                <li><router-link to="/drawer">Drawer</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/examples/main.js b/examples/main.js
index 7f8f88b2..748c759a 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -225,6 +225,10 @@ const router = new VueRouter({
         {
             path: '/cell',
             component: (resolve) => require(['./routers/cell.vue'], resolve)
+        },
+        {
+            path: '/drawer',
+            component: (resolve) => require(['./routers/drawer.vue'], resolve)
         }
     ]
 });
diff --git a/examples/routers/drawer.vue b/examples/routers/drawer.vue
new file mode 100644
index 00000000..720ac0f9
--- /dev/null
+++ b/examples/routers/drawer.vue
@@ -0,0 +1,75 @@
+<template>
+    <Row :gutter="16">
+        <i-col span="12">
+            <Card title="horizontal divider">
+                <div>
+                    <p>
+                        iView is a set of UI components and widgets built on Vue.js.
+                        iView is a set of UI components and widgets built on Vue.js.
+                        iView is a set of UI components and widgets built on Vue.js.
+                    </p>
+
+                    <Divider/>
+
+                    <p>
+                        iView is a set of UI components and widgets built on Vue.js.
+                        iView is a set of UI components and widgets built on Vue.js.
+                        iView is a set of UI components and widgets built on Vue.js.
+                    </p>
+
+                    <Divider>iView </Divider>
+
+                    <p>
+                        iView is a set of UI components and widgets built on Vue.js.
+                        iView is a set of UI components and widgets built on Vue.js.
+                        iView is a set of UI components and widgets built on Vue.js.
+                    </p>
+
+                    <Divider dashed/>
+
+                    <p>
+                        iView is a set of UI components and widgets built on Vue.js.
+                        iView is a set of UI components and widgets built on Vue.js.
+                        iView is a set of UI components and widgets built on Vue.js.
+                    </p>
+
+                    <Divider orientation="left">iView</Divider>
+
+                    <p>
+                        iView is a set of UI components and widgets built on Vue.js.
+                        iView is a set of UI components and widgets built on Vue.js.
+                        iView is a set of UI components and widgets built on Vue.js.
+                    </p>
+
+                    <Divider orientation="right">iView</Divider>
+
+                    <p>
+                        iView is a set of UI components and widgets built on Vue.js.
+                        iView is a set of UI components and widgets built on Vue.js.
+                        iView is a set of UI components and widgets built on Vue.js.
+                    </p>
+
+                </div>
+            </Card>
+        </i-col>
+        <i-col span="12">
+            <Card title="vertical divider">
+                <div>
+                    iView
+                    <Divider type="vertical" />
+                    <a href="#">Components</a>
+                    <Divider type="vertical" />
+                    <a href="#">Divider</a>
+                </div>
+            </Card>
+        </i-col>
+    </Row>
+</template>
+
+<script>
+    export default {}
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/drawer/drawer.vue b/src/components/drawer/drawer.vue
index 1550b310..869c776f 100644
--- a/src/components/drawer/drawer.vue
+++ b/src/components/drawer/drawer.vue
@@ -2,11 +2,73 @@
     <div></div>
 </template>
 <script>
+    import Icon from '../icon';
+    import { oneOf } from '../../utils/assist';
+    import TransferDom from '../../directives/transfer-dom';
+    import ScrollbarMixins from '../modal/mixins-scrollbar';
+
     const prefixCls = 'ivu-drawer';
 
     export default {
         name: 'Drawer',
+        mixins: [ ScrollbarMixins ],
+        components: { Icon },
+        directives: { TransferDom },
         props: {
+            value: {
+                type: Boolean,
+                default: false
+            },
+            title: {
+                type: String
+            },
+            width: {
+                type: [Number, String],
+                default: 256
+            },
+            closable: {
+                type: Boolean,
+                default: true
+            },
+            maskClosable: {
+                type: Boolean,
+                default: true
+            },
+            mask: {
+                type: Boolean,
+                default: true
+            },
+            maskStyle: {
+                type: Object
+            },
+            scrollable: {
+                type: Boolean,
+                default: false
+            },
+            placement: {
+                validator (value) {
+                    return oneOf(value, ['left', 'right']);
+                },
+                default: 'right'
+            },
+            zIndex: {
+                type: Number,
+                default: 1000
+            },
+            transfer: {
+                type: Boolean,
+                default () {
+                    return !this.$IVIEW || this.$IVIEW.transfer === '' ? true : this.$IVIEW.transfer;
+                }
+            },
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                visible: this.value,
+            };
+        },
+        methods: {
 
         }
     };