chenhaodong / 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 3 <Button @click="visible = true">show1</Button>
4 4 <Button @click="visible2 = true">show2</Button>
5 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 68 <Drawer v-model="visible2" title="抽屉标题" placement="right">
65 69 <p>一些内容</p>
... ...
src/components/drawer/drawer.vue
  Show/Hide comments   View file @8a3c728
1 1 <template>
2 2 <div v-transfer-dom :data-transfer="transfer">
3 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 5 </transition>
6 6 <div :class="wrapClasses" @click="handleWrapClick">
7 7 <transition :name="'move-' + placement">
... ... @@ -86,6 +86,10 @@
86 86 },
87 87 className: {
88 88 type: String
  89 + },
  90 + inner: {
  91 + type: Boolean,
  92 + default: false
89 93 }
90 94 },
91 95 data () {
... ... @@ -103,7 +107,8 @@
103 107 {
104 108 [`${prefixCls}-hidden`]: !this.wrapShow,
105 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 139 `${prefixCls}-${this.placement}`,
135 140 {
136 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 position: fixed;
7 7 top: 0;
8 8  
  9 + &-inner{
  10 + position: absolute;
  11 + }
  12 +
9 13 &-left{
10 14 left: 0;
11 15 }
... ... @@ -27,6 +31,10 @@
27 31 z-index: @zindex-drawer;
28 32 -webkit-overflow-scrolling: touch;
29 33 outline: 0;
  34 +
  35 + &-inner{
  36 + position: absolute;
  37 + }
30 38 }
31 39  
32 40 &-wrap * {
... ... @@ -36,6 +44,9 @@
36 44  
37 45 &-mask {
38 46 .mask;
  47 + &-inner{
  48 + position: absolute;
  49 + }
39 50 }
40 51  
41 52 &-content {
... ...