Commit ab58648e93bafc754bf9601079ae4f7fc2e52abb
1 parent
1416321b
update Drawer
Showing
4 changed files
with
295 additions
and
69 deletions
Show diff stats
examples/routers/drawer.vue
| 1 | <template> | 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 | </template> | 183 | </template> |
| 68 | 184 | ||
| 69 | <script> | 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 | </script> | 202 | </script> |
| 72 | 203 | ||
| 73 | <style> | 204 | <style> |
| 74 | - | 205 | +body{ |
| 206 | + height: 2000px; | ||
| 207 | +} | ||
| 75 | </style> | 208 | </style> |
src/components/drawer/drawer.vue
| @@ -4,8 +4,8 @@ | @@ -4,8 +4,8 @@ | ||
| 4 | <div class="ivu-drawer-mask" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div> | 4 | <div class="ivu-drawer-mask" :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="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 | <div :class="contentClasses" ref="content"> | 9 | <div :class="contentClasses" ref="content"> |
| 10 | <a class="ivu-drawer-close" v-if="closable" @click="close"> | 10 | <a class="ivu-drawer-close" v-if="closable" @click="close"> |
| 11 | <slot name="close"> | 11 | <slot name="close"> |
| @@ -24,13 +24,14 @@ | @@ -24,13 +24,14 @@ | ||
| 24 | import Icon from '../icon'; | 24 | import Icon from '../icon'; |
| 25 | import { oneOf } from '../../utils/assist'; | 25 | import { oneOf } from '../../utils/assist'; |
| 26 | import TransferDom from '../../directives/transfer-dom'; | 26 | import TransferDom from '../../directives/transfer-dom'; |
| 27 | + import Emitter from '../../mixins/emitter'; | ||
| 27 | import ScrollbarMixins from '../modal/mixins-scrollbar'; | 28 | import ScrollbarMixins from '../modal/mixins-scrollbar'; |
| 28 | 29 | ||
| 29 | const prefixCls = 'ivu-drawer'; | 30 | const prefixCls = 'ivu-drawer'; |
| 30 | 31 | ||
| 31 | export default { | 32 | export default { |
| 32 | name: 'Drawer', | 33 | name: 'Drawer', |
| 33 | - mixins: [ ScrollbarMixins ], | 34 | + mixins: [ Emitter, ScrollbarMixins ], |
| 34 | components: { Icon }, | 35 | components: { Icon }, |
| 35 | directives: { TransferDom }, | 36 | directives: { TransferDom }, |
| 36 | props: { | 37 | props: { |
| @@ -60,6 +61,9 @@ | @@ -60,6 +61,9 @@ | ||
| 60 | maskStyle: { | 61 | maskStyle: { |
| 61 | type: Object | 62 | type: Object |
| 62 | }, | 63 | }, |
| 64 | + styles: { | ||
| 65 | + type: Object | ||
| 66 | + }, | ||
| 63 | scrollable: { | 67 | scrollable: { |
| 64 | type: Boolean, | 68 | type: Boolean, |
| 65 | default: false | 69 | default: false |
| @@ -124,6 +128,15 @@ | @@ -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 | methods: { | 141 | methods: { |
| 129 | close () { | 142 | close () { |
src/styles/components/drawer.less
| 1 | @drawer-prefix-cls: ~"@{css-prefix}drawer"; | 1 | @drawer-prefix-cls: ~"@{css-prefix}drawer"; |
| 2 | 2 | ||
| 3 | .@{drawer-prefix-cls} { | 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 | \ No newline at end of file | 85 | \ No newline at end of file |
src/styles/custom.less
| @@ -166,6 +166,7 @@ | @@ -166,6 +166,7 @@ | ||
| 166 | @zindex-back-top : 10; | 166 | @zindex-back-top : 10; |
| 167 | @zindex-select : 900; | 167 | @zindex-select : 900; |
| 168 | @zindex-modal : 1000; | 168 | @zindex-modal : 1000; |
| 169 | +@zindex-drawer : 1000; | ||
| 169 | @zindex-message : 1010; | 170 | @zindex-message : 1010; |
| 170 | @zindex-notification : 1010; | 171 | @zindex-notification : 1010; |
| 171 | @zindex-tooltip : 1060; | 172 | @zindex-tooltip : 1060; |