other / mew-iview

Commit 8a3c7282f8c3f97e99252a1fd9a210166200e09c

Authored by 梁灏
1 parent ab58648e

add inner prop

Showing 3 changed files with 88 additions and 59 deletions   Show diff stats
Inline Side-by-side
examples/routers/drawer.vue
  Show/Hide comments   View file @8a3c728
@@ -3,63 +3,67 @@ @@ -3,63 +3,67 @@
3 <Button @click="visible = true">show1</Button> 3 <Button @click="visible = true">show1</Button>
4 <Button @click="visible2 = true">show2</Button> 4 <Button @click="visible2 = true">show2</Button>
5 <Button @click="visible3 = true">show3</Button> 5 <Button @click="visible3 = true">show3</Button>
6 - <Drawer v-model="visible" title="抽屉标题" :styles="styles" width="520">  
7 - <p>一些内容</p>  
8 - <p>一些内容</p>  
9 - <p>一些内容</p>  
10 - <Button @click="visible2 = true">show2</Button>  
11 - <p>一些内容</p>  
12 - <p>一些内容</p>  
13 - <p>一些内容</p>  
14 - <p>一些内容</p>  
15 - <p>一些内容</p>  
16 - <p>一些内容</p>  
17 - <p>一些内容</p>  
18 - <p>一些内容</p>  
19 - <p>一些内容</p>  
20 - <p>一些内容</p>  
21 - <p>一些内容</p>  
22 - <p>一些内容</p>  
23 - <p>一些内容</p>  
24 - <p>一些内容</p>  
25 - <p>一些内容</p>  
26 - <p>一些内容</p>  
27 - <p>一些内容</p>  
28 - <p>一些内容</p>  
29 - <p>一些内容</p>  
30 - <p>一些内容</p>  
31 - <p>一些内容</p>  
32 - <p>一些内容</p>  
33 - <p>一些内容</p>  
34 - <p>一些内容</p>  
35 - <p>一些内容</p>  
36 - <p>一些内容</p>  
37 - <p>一些内容</p>  
38 - <p>一些内容</p>  
39 - <p>一些内容</p>  
40 - <p>一些内容</p>  
41 - <p>一些内容</p>  
42 - <p>一些内容</p>  
43 - <p>一些内容</p>  
44 - <p>一些内容</p>  
45 - <p>一些内容</p>  
46 - <p>一些内容</p>  
47 - <p>一些内容</p>  
48 - <p>一些内容</p>  
49 - <p>一些内容</p>  
50 - <p>一些内容</p>  
51 - <p>一些内容</p>  
52 - <p>一些内容</p>  
53 - <p>一些内容</p>  
54 - <p>一些内容</p>  
55 - <p>一些内容</p>  
56 - <p>一些内容</p>  
57 - <p>一些内容</p>  
58 - <p>一些内容</p>  
59 - <p>一些内容</p>  
60 - <p>一些内容</p>  
61 - <p>一些内容</p>  
62 - </Drawer> 6 +
  7 + <div style="width: 500px;height:500px;background: green;position: relative;">
  8 + <Drawer v-model="visible" title="抽屉标题" :styles="styles" :transfer="false" inner>
  9 + <p>一些内容</p>
  10 + <p>一些内容</p>
  11 + <p>一些内容</p>
  12 + <Button @click="visible2 = true">show2</Button>
  13 + <p>一些内容</p>
  14 + <p>一些内容</p>
  15 + <p>一些内容</p>
  16 + <p>一些内容</p>
  17 + <p>一些内容</p>
  18 + <p>一些内容</p>
  19 + <p>一些内容</p>
  20 + <p>一些内容</p>
  21 + <p>一些内容</p>
  22 + <p>一些内容</p>
  23 + <p>一些内容</p>
  24 + <p>一些内容</p>
  25 + <p>一些内容</p>
  26 + <p>一些内容</p>
  27 + <p>一些内容</p>
  28 + <p>一些内容</p>
  29 + <p>一些内容</p>
  30 + <p>一些内容</p>
  31 + <p>一些内容</p>
  32 + <p>一些内容</p>
  33 + <p>一些内容</p>
  34 + <p>一些内容</p>
  35 + <p>一些内容</p>
  36 + <p>一些内容</p>
  37 + <p>一些内容</p>
  38 + <p>一些内容</p>
  39 + <p>一些内容</p>
  40 + <p>一些内容</p>
  41 + <p>一些内容</p>
  42 + <p>一些内容</p>
  43 + <p>一些内容</p>
  44 + <p>一些内容</p>
  45 + <p>一些内容</p>
  46 + <p>一些内容</p>
  47 + <p>一些内容</p>
  48 + <p>一些内容</p>
  49 + <p>一些内容</p>
  50 + <p>一些内容</p>
  51 + <p>一些内容</p>
  52 + <p>一些内容</p>
  53 + <p>一些内容</p>
  54 + <p>一些内容</p>
  55 + <p>一些内容</p>
  56 + <p>一些内容</p>
  57 + <p>一些内容</p>
  58 + <p>一些内容</p>
  59 + <p>一些内容</p>
  60 + <p>一些内容</p>
  61 + <p>一些内容</p>
  62 + <p>一些内容</p>
  63 + <p>一些内容</p>
  64 + </Drawer>
  65 + </div>
  66 +
63 67
64 <Drawer v-model="visible2" title="抽屉标题" placement="right"> 68 <Drawer v-model="visible2" title="抽屉标题" placement="right">
65 <p>一些内容</p> 69 <p>一些内容</p>
src/components/drawer/drawer.vue
  Show/Hide comments   View file @8a3c728
1 <template> 1 <template>
2 <div v-transfer-dom :data-transfer="transfer"> 2 <div v-transfer-dom :data-transfer="transfer">
3 <transition name="fade"> 3 <transition name="fade">
4 - <div class="ivu-drawer-mask" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div> 4 + <div :class="maskClasses" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div>
5 </transition> 5 </transition>
6 <div :class="wrapClasses" @click="handleWrapClick"> 6 <div :class="wrapClasses" @click="handleWrapClick">
7 <transition :name="'move-' + placement"> 7 <transition :name="'move-' + placement">
@@ -86,6 +86,10 @@ @@ -86,6 +86,10 @@
86 }, 86 },
87 className: { 87 className: {
88 type: String 88 type: String
  89 + },
  90 + inner: {
  91 + type: Boolean,
  92 + default: false
89 } 93 }
90 }, 94 },
91 data () { 95 data () {
@@ -103,7 +107,8 @@ @@ -103,7 +107,8 @@
103 { 107 {
104 [`${prefixCls}-hidden`]: !this.wrapShow, 108 [`${prefixCls}-hidden`]: !this.wrapShow,
105 [`${this.className}`]: !!this.className, 109 [`${this.className}`]: !!this.className,
106 - [`${prefixCls}-no-mask`]: !this.mask 110 + [`${prefixCls}-no-mask`]: !this.mask,
  111 + [`${prefixCls}-wrap-inner`]: this.inner
107 } 112 }
108 ]; 113 ];
109 }, 114 },
@@ -134,6 +139,15 @@ @@ -134,6 +139,15 @@
134 `${prefixCls}-${this.placement}`, 139 `${prefixCls}-${this.placement}`,
135 { 140 {
136 [`${prefixCls}-no-header`]: !this.showHead, 141 [`${prefixCls}-no-header`]: !this.showHead,
  142 + [`${prefixCls}-inner`]: this.inner
  143 + }
  144 + ];
  145 + },
  146 + maskClasses () {
  147 + return [
  148 + `${prefixCls}-mask`,
  149 + {
  150 + [`${prefixCls}-mask-inner`]: this.inner
137 } 151 }
138 ]; 152 ];
139 } 153 }
src/styles/components/drawer.less
  Show/Hide comments   View file @8a3c728
@@ -6,6 +6,10 @@ @@ -6,6 +6,10 @@
6 position: fixed; 6 position: fixed;
7 top: 0; 7 top: 0;
8 8
  9 + &-inner{
  10 + position: absolute;
  11 + }
  12 +
9 &-left{ 13 &-left{
10 left: 0; 14 left: 0;
11 } 15 }
@@ -27,6 +31,10 @@ @@ -27,6 +31,10 @@
27 z-index: @zindex-drawer; 31 z-index: @zindex-drawer;
28 -webkit-overflow-scrolling: touch; 32 -webkit-overflow-scrolling: touch;
29 outline: 0; 33 outline: 0;
  34 +
  35 + &-inner{
  36 + position: absolute;
  37 + }
30 } 38 }
31 39
32 &-wrap * { 40 &-wrap * {
@@ -36,6 +44,9 @@ @@ -36,6 +44,9 @@
36 44
37 &-mask { 45 &-mask {
38 .mask; 46 .mask;
  47 + &-inner{
  48 + position: absolute;
  49 + }
39 } 50 }
40 51
41 &-content { 52 &-content {