add props

梁灏
1 parent c4d780c0
Showing 4 changed files with 142 additions and 0 deletions Show diff stats
examples/app.vue
examples/main.js
examples/routers/drawer.vue
src/components/drawer/drawer.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>
@@ -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)
         }
     ]
 });
+<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>
@@ -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: {
  
         }
     };