From 8a3c7282f8c3f97e99252a1fd9a210166200e09c Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Fri, 24 Aug 2018 12:03:52 +0800
Subject: [PATCH] add inner prop

---
 examples/routers/drawer.vue       | 118 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------
 src/components/drawer/drawer.vue  |  18 ++++++++++++++++--
 src/styles/components/drawer.less |  11 +++++++++++
 3 files changed, 88 insertions(+), 59 deletions(-)

diff --git a/examples/routers/drawer.vue b/examples/routers/drawer.vue
index 3559caa..9455f29 100644
--- a/examples/routers/drawer.vue
+++ b/examples/routers/drawer.vue
@@ -3,63 +3,67 @@
         <Button @click="visible = true">show1</Button>
         <Button @click="visible2 = true">show2</Button>
         <Button @click="visible3 = true">show3</Button>
-        <Drawer v-model="visible" title="抽屉标题" :styles="styles" width="520">
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <Button @click="visible2 = true">show2</Button>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-            <p>一些内容</p>
-        </Drawer>
+
+        <div style="width: 500px;height:500px;background: green;position: relative;">
+            <Drawer v-model="visible" title="抽屉标题" :styles="styles" :transfer="false" inner>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <Button @click="visible2 = true">show2</Button>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+                <p>一些内容</p>
+            </Drawer>
+        </div>
+
 
         <Drawer v-model="visible2" title="抽屉标题" placement="right">
             <p>一些内容</p>
diff --git a/src/components/drawer/drawer.vue b/src/components/drawer/drawer.vue
index 18caed9..762e78c 100644
--- a/src/components/drawer/drawer.vue
+++ b/src/components/drawer/drawer.vue
@@ -1,7 +1,7 @@
 <template>
     <div v-transfer-dom :data-transfer="transfer">
         <transition name="fade">
-            <div class="ivu-drawer-mask" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div>
+            <div :class="maskClasses" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div>
         </transition>
         <div :class="wrapClasses" @click="handleWrapClick">
             <transition :name="'move-' + placement">
@@ -86,6 +86,10 @@
             },
             className: {
                 type: String
+            },
+            inner: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -103,7 +107,8 @@
                     {
                         [`${prefixCls}-hidden`]: !this.wrapShow,
                         [`${this.className}`]: !!this.className,
-                        [`${prefixCls}-no-mask`]: !this.mask
+                        [`${prefixCls}-no-mask`]: !this.mask,
+                        [`${prefixCls}-wrap-inner`]: this.inner
                     }
                 ];
             },
@@ -134,6 +139,15 @@
                     `${prefixCls}-${this.placement}`,
                     {
                         [`${prefixCls}-no-header`]: !this.showHead,
+                        [`${prefixCls}-inner`]: this.inner
+                    }
+                ];
+            },
+            maskClasses () {
+                return [
+                    `${prefixCls}-mask`,
+                    {
+                        [`${prefixCls}-mask-inner`]: this.inner
                     }
                 ];
             }
diff --git a/src/styles/components/drawer.less b/src/styles/components/drawer.less
index ab5ce1f..61895ba 100644
--- a/src/styles/components/drawer.less
+++ b/src/styles/components/drawer.less
@@ -6,6 +6,10 @@
     position: fixed;
     top: 0;
 
+    &-inner{
+        position: absolute;
+    }
+
     &-left{
         left: 0;
     }
@@ -27,6 +31,10 @@
         z-index: @zindex-drawer;
         -webkit-overflow-scrolling: touch;
         outline: 0;
+
+        &-inner{
+            position: absolute;
+        }
     }
 
     &-wrap * {
@@ -36,6 +44,9 @@
 
     &-mask {
         .mask;
+        &-inner{
+            position: absolute;
+        }
     }
 
     &-content {
--
libgit2 0.21.4