chenhaodong / mew-iview

Commit ab58648e93bafc754bf9601079ae4f7fc2e52abb

Authored by 梁灏
1 parent 1416321b

update Drawer

Showing 4 changed files with 295 additions and 69 deletions   Show diff stats
Inline Side-by-side
examples/routers/drawer.vue
  Show/Hide comments   View file @ab58648
1 1 <template>
2   - <Row :gutter="16">
3   - <i-col span="12">
4   - <Card title="horizontal divider">
5   - <div>
6   - <p>
7   - iView is a set of UI components and widgets built on Vue.js.
8   - iView is a set of UI components and widgets built on Vue.js.
9   - iView is a set of UI components and widgets built on Vue.js.
10   - </p>
  2 + <div>
  3 + <Button @click="visible = true">show1</Button>
  4 + <Button @click="visible2 = true">show2</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>
11 63  
12   - <Divider/>
13   -
14   - <p>
15   - iView is a set of UI components and widgets built on Vue.js.
16   - iView is a set of UI components and widgets built on Vue.js.
17   - iView is a set of UI components and widgets built on Vue.js.
18   - </p>
19   -
20   - <Divider>iView </Divider>
21   -
22   - <p>
23   - iView is a set of UI components and widgets built on Vue.js.
24   - iView is a set of UI components and widgets built on Vue.js.
25   - iView is a set of UI components and widgets built on Vue.js.
26   - </p>
27   -
28   - <Divider dashed/>
29   -
30   - <p>
31   - iView is a set of UI components and widgets built on Vue.js.
32   - iView is a set of UI components and widgets built on Vue.js.
33   - iView is a set of UI components and widgets built on Vue.js.
34   - </p>
35   -
36   - <Divider orientation="left">iView</Divider>
37   -
38   - <p>
39   - iView is a set of UI components and widgets built on Vue.js.
40   - iView is a set of UI components and widgets built on Vue.js.
41   - iView is a set of UI components and widgets built on Vue.js.
42   - </p>
43   -
44   - <Divider orientation="right">iView</Divider>
45   -
46   - <p>
47   - iView is a set of UI components and widgets built on Vue.js.
48   - iView is a set of UI components and widgets built on Vue.js.
49   - iView is a set of UI components and widgets built on Vue.js.
50   - </p>
51   -
52   - </div>
53   - </Card>
54   - </i-col>
55   - <i-col span="12">
56   - <Card title="vertical divider">
57   - <div>
58   - iView
59   - <Divider type="vertical" />
60   - <a href="#">Components</a>
61   - <Divider type="vertical" />
62   - <a href="#">Divider</a>
63   - </div>
64   - </Card>
65   - </i-col>
66   - </Row>
  64 + <Drawer v-model="visible2" title="抽屉标题" placement="right">
  65 + <p>一些内容</p>
  66 + <p>一些内容</p>
  67 + <p>一些内容</p>
  68 + <p>一些内容</p>
  69 + <p>一些内容</p>
  70 + <p>一些内容</p>
  71 + <p>一些内容</p>
  72 + <p>一些内容</p>
  73 + <p>一些内容</p>
  74 + <p>一些内容</p>
  75 + <p>一些内容</p>
  76 + <p>一些内容</p>
  77 + <p>一些内容</p>
  78 + <p>一些内容</p>
  79 + <p>一些内容</p>
  80 + <p>一些内容</p>
  81 + <p>一些内容</p>
  82 + <p>一些内容</p>
  83 + <p>一些内容</p>
  84 + <p>一些内容</p>
  85 + <p>一些内容</p>
  86 + <p>一些内容</p>
  87 + <p>一些内容</p>
  88 + <p>一些内容</p>
  89 + <p>一些内容</p>
  90 + <p>一些内容</p>
  91 + <p>一些内容</p>
  92 + <p>一些内容</p>
  93 + <p>一些内容</p>
  94 + <p>一些内容</p>
  95 + <p>一些内容</p>
  96 + <p>一些内容</p>
  97 + <p>一些内容</p>
  98 + <p>一些内容</p>
  99 + <p>一些内容</p>
  100 + <p>一些内容</p>
  101 + <p>一些内容</p>
  102 + <p>一些内容</p>
  103 + <p>一些内容</p>
  104 + <p>一些内容</p>
  105 + <p>一些内容</p>
  106 + <p>一些内容</p>
  107 + <p>一些内容</p>
  108 + <p>一些内容</p>
  109 + <p>一些内容</p>
  110 + <p>一些内容</p>
  111 + <p>一些内容</p>
  112 + <p>一些内容</p>
  113 + <p>一些内容</p>
  114 + <p>一些内容</p>
  115 + <p>一些内容</p>
  116 + <p>一些内容</p>
  117 + <p>一些内容</p>
  118 + <p>一些内容</p>
  119 + <p>一些内容</p>
  120 + <p>一些内容</p>
  121 + <p>一些内容22</p>
  122 + </Drawer>
  123 + <Drawer v-model="visible3" placement="left">
  124 + <p>一些内容</p>
  125 + <p>一些内容</p>
  126 + <p>一些内容</p>
  127 + <p>一些内容</p>
  128 + <p>一些内容</p>
  129 + <p>一些内容</p>
  130 + <p>一些内容</p>
  131 + <p>一些内容</p>
  132 + <p>一些内容</p>
  133 + <p>一些内容</p>
  134 + <p>一些内容</p>
  135 + <p>一些内容</p>
  136 + <p>一些内容</p>
  137 + <p>一些内容</p>
  138 + <p>一些内容</p>
  139 + <p>一些内容</p>
  140 + <p>一些内容</p>
  141 + <p>一些内容</p>
  142 + <p>一些内容</p>
  143 + <p>一些内容</p>
  144 + <p>一些内容</p>
  145 + <p>一些内容</p>
  146 + <p>一些内容</p>
  147 + <p>一些内容</p>
  148 + <p>一些内容</p>
  149 + <p>一些内容</p>
  150 + <p>一些内容</p>
  151 + <p>一些内容</p>
  152 + <p>一些内容</p>
  153 + <p>一些内容</p>
  154 + <p>一些内容</p>
  155 + <p>一些内容</p>
  156 + <p>一些内容</p>
  157 + <p>一些内容</p>
  158 + <p>一些内容</p>
  159 + <p>一些内容</p>
  160 + <p>一些内容</p>
  161 + <p>一些内容</p>
  162 + <p>一些内容</p>
  163 + <p>一些内容</p>
  164 + <p>一些内容</p>
  165 + <p>一些内容</p>
  166 + <p>一些内容</p>
  167 + <p>一些内容</p>
  168 + <p>一些内容</p>
  169 + <p>一些内容</p>
  170 + <p>一些内容</p>
  171 + <p>一些内容</p>
  172 + <p>一些内容</p>
  173 + <p>一些内容</p>
  174 + <p>一些内容</p>
  175 + <p>一些内容</p>
  176 + <p>一些内容</p>
  177 + <p>一些内容</p>
  178 + <p>一些内容</p>
  179 + <p>一些内容</p>
  180 + <p>一些内容22</p>
  181 + </Drawer>
  182 + </div>
67 183 </template>
68 184  
69 185 <script>
70   - export default {}
  186 + export default {
  187 + data () {
  188 + return {
  189 + visible: false,
  190 + visible2: false,
  191 + visible3: false,
  192 + styles: {
  193 + height: 'calc(100% - 55px)',
  194 + paddingBottom: '53px',
  195 + },
  196 + ms: {
  197 + backgroundColor: 'rgba(255,0,255,0.5)'
  198 + }
  199 + };
  200 + }
  201 + };
71 202 </script>
72 203  
73 204 <style>
74   -
  205 +body{
  206 + height: 2000px;
  207 +}
75 208 </style>
... ...
src/components/drawer/drawer.vue
  Show/Hide comments   View file @ab58648
... ... @@ -4,8 +4,8 @@
4 4 <div class="ivu-drawer-mask" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div>
5 5 </transition>
6 6 <div :class="wrapClasses" @click="handleWrapClick">
7   - <transition name="fade">
8   - <div class="ivu-drawer" :style="mainStyles" v-show="visible">
  7 + <transition :name="'move-' + placement">
  8 + <div :class="classes" :style="mainStyles" v-show="visible">
9 9 <div :class="contentClasses" ref="content">
10 10 <a class="ivu-drawer-close" v-if="closable" @click="close">
11 11 <slot name="close">
... ... @@ -24,13 +24,14 @@
24 24 import Icon from '../icon';
25 25 import { oneOf } from '../../utils/assist';
26 26 import TransferDom from '../../directives/transfer-dom';
  27 + import Emitter from '../../mixins/emitter';
27 28 import ScrollbarMixins from '../modal/mixins-scrollbar';
28 29  
29 30 const prefixCls = 'ivu-drawer';
30 31  
31 32 export default {
32 33 name: 'Drawer',
33   - mixins: [ ScrollbarMixins ],
  34 + mixins: [ Emitter, ScrollbarMixins ],
34 35 components: { Icon },
35 36 directives: { TransferDom },
36 37 props: {
... ... @@ -60,6 +61,9 @@
60 61 maskStyle: {
61 62 type: Object
62 63 },
  64 + styles: {
  65 + type: Object
  66 + },
63 67 scrollable: {
64 68 type: Boolean,
65 69 default: false
... ... @@ -124,6 +128,15 @@
124 128 }
125 129 ];
126 130 },
  131 + classes () {
  132 + return [
  133 + `${prefixCls}`,
  134 + `${prefixCls}-${this.placement}`,
  135 + {
  136 + [`${prefixCls}-no-header`]: !this.showHead,
  137 + }
  138 + ];
  139 + }
127 140 },
128 141 methods: {
129 142 close () {
... ...
src/styles/components/drawer.less
  Show/Hide comments   View file @ab58648
1 1 @drawer-prefix-cls: ~"@{css-prefix}drawer";
2 2  
3 3 .@{drawer-prefix-cls} {
  4 + width: auto;
  5 + height: 100%;
  6 + position: fixed;
  7 + top: 0;
4 8  
  9 + &-left{
  10 + left: 0;
  11 + }
  12 + &-right{
  13 + right: 0;
  14 + }
  15 +
  16 + &-hidden {
  17 + display: none !important;
  18 + }
  19 +
  20 + &-wrap {
  21 + position: fixed;
  22 + overflow: auto;
  23 + top: 0;
  24 + right: 0;
  25 + bottom: 0;
  26 + left: 0;
  27 + z-index: @zindex-drawer;
  28 + -webkit-overflow-scrolling: touch;
  29 + outline: 0;
  30 + }
  31 +
  32 + &-wrap * {
  33 + box-sizing: border-box;
  34 + -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  35 + }
  36 +
  37 + &-mask {
  38 + .mask;
  39 + }
  40 +
  41 + &-content {
  42 + width: 100%;
  43 + height: 100%;
  44 + position: absolute;
  45 + top: 0;
  46 + bottom: 0;
  47 + background-color: #fff;
  48 + border: 0;
  49 + background-clip: padding-box;
  50 + box-shadow: 0 4px 12px rgba(0,0,0,.15);
  51 +
  52 + &-no-mask{
  53 + pointer-events: auto;
  54 + }
  55 + }
  56 +
  57 + &-header {
  58 + .content-header;
  59 + }
  60 +
  61 + &-close {
  62 + z-index: 1;
  63 + .content-close(1px, 31px);
  64 + }
  65 +
  66 + &-body {
  67 + width: 100%;
  68 + height: calc(~'100% - 51px');
  69 + padding: 16px;
  70 + font-size: 12px;
  71 + line-height: 1.5;
  72 + word-wrap: break-word;
  73 + position: absolute;
  74 + overflow: auto;
  75 + }
  76 +
  77 + &-no-header &-body{
  78 + height: 100%;
  79 + }
  80 +
  81 + &-no-mask{
  82 + pointer-events: none;
  83 + }
5 84 }
6 85 \ No newline at end of file
... ...
src/styles/custom.less
  Show/Hide comments   View file @ab58648
... ... @@ -166,6 +166,7 @@
166 166 @zindex-back-top : 10;
167 167 @zindex-select : 900;
168 168 @zindex-modal : 1000;
  169 +@zindex-drawer : 1000;
169 170 @zindex-message : 1010;
170 171 @zindex-notification : 1010;
171 172 @zindex-tooltip : 1060;
... ...