Commit f59e6e89ad2fa12340a17bff0c204cd396fa9068
1 parent
749665ee
update Drawer
Showing
2 changed files
with
126 additions
and
2 deletions
Show diff stats
src/components/drawer/drawer.vue
| 1 | 1 | <template> |
| 2 | - <div></div> | |
| 2 | + <div v-transfer-dom :data-transfer="transfer"> | |
| 3 | + <transition name="fade"> | |
| 4 | + <div class="ivu-drawer-mask" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div> | |
| 5 | + </transition> | |
| 6 | + <div :class="wrapClasses" @click="handleWrapClick"> | |
| 7 | + <transition name="fade"> | |
| 8 | + <div class="ivu-drawer" :style="mainStyles" v-show="visible"> | |
| 9 | + <div :class="contentClasses" ref="content" :style="contentStyles"> | |
| 10 | + <a class="ivu-drawer-close" v-if="closable" @click="close"> | |
| 11 | + <slot name="close"> | |
| 12 | + <Icon type="ios-close"></Icon> | |
| 13 | + </slot> | |
| 14 | + </a> | |
| 15 | + <div :class="[prefixCls + '-header']" | |
| 16 | + @mousedown="handleMoveStart" | |
| 17 | + v-if="showHead" | |
| 18 | + ><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div> | |
| 19 | + <div :class="[prefixCls + '-body']" :style="styles"><slot></slot></div> | |
| 20 | + </div> | |
| 21 | + </div> | |
| 22 | + </transition> | |
| 23 | + </div> | |
| 24 | + </div> | |
| 3 | 25 | </template> |
| 4 | 26 | <script> |
| 5 | 27 | import Icon from '../icon'; |
| ... | ... | @@ -61,15 +83,117 @@ |
| 61 | 83 | return !this.$IVIEW || this.$IVIEW.transfer === '' ? true : this.$IVIEW.transfer; |
| 62 | 84 | } |
| 63 | 85 | }, |
| 86 | + className: { | |
| 87 | + type: String | |
| 88 | + } | |
| 64 | 89 | }, |
| 65 | 90 | data () { |
| 66 | 91 | return { |
| 67 | 92 | prefixCls: prefixCls, |
| 68 | 93 | visible: this.value, |
| 94 | + wrapShow: false, | |
| 95 | + showHead: true, | |
| 69 | 96 | }; |
| 70 | 97 | }, |
| 98 | + computed: { | |
| 99 | + wrapClasses () { | |
| 100 | + return [ | |
| 101 | + `${prefixCls}-wrap`, | |
| 102 | + { | |
| 103 | + [`${prefixCls}-hidden`]: !this.wrapShow, | |
| 104 | + [`${this.className}`]: !!this.className, | |
| 105 | + [`${prefixCls}-no-mask`]: !this.mask | |
| 106 | + } | |
| 107 | + ]; | |
| 108 | + }, | |
| 109 | + mainStyles () { | |
| 110 | + let style = {}; | |
| 111 | + | |
| 112 | + const width = parseInt(this.width); | |
| 113 | + | |
| 114 | + const styleWidth = { | |
| 115 | + width: width <= 100 ? `${width}%` : `${width}px` | |
| 116 | + }; | |
| 117 | + | |
| 118 | + Object.assign(style, styleWidth); | |
| 119 | + | |
| 120 | + return style; | |
| 121 | + }, | |
| 122 | + contentClasses () { | |
| 123 | + return [ | |
| 124 | + `${prefixCls}-content`, | |
| 125 | + { | |
| 126 | + [`${prefixCls}-content-no-mask`]: !this.mask | |
| 127 | + } | |
| 128 | + ]; | |
| 129 | + }, | |
| 130 | + }, | |
| 71 | 131 | methods: { |
| 132 | + close () { | |
| 133 | + this.visible = false; | |
| 134 | + this.$emit('input', false); | |
| 135 | + this.$emit('on-close'); | |
| 136 | + }, | |
| 137 | + handleMask () { | |
| 138 | + if (this.maskClosable && this.mask) { | |
| 139 | + this.close(); | |
| 140 | + } | |
| 141 | + }, | |
| 142 | + handleWrapClick (event) { | |
| 143 | + // use indexOf,do not use === ,because ivu-modal-wrap can have other custom className | |
| 144 | + const className = event.target.getAttribute('class'); | |
| 145 | + if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.handleMask(); | |
| 146 | + }, | |
| 147 | + }, | |
| 148 | + mounted () { | |
| 149 | + if (this.visible) { | |
| 150 | + this.wrapShow = true; | |
| 151 | + } | |
| 152 | + | |
| 153 | + let showHead = true; | |
| 72 | 154 | |
| 155 | + if (this.$slots.header === undefined && !this.title) { | |
| 156 | + showHead = false; | |
| 157 | + } | |
| 158 | + | |
| 159 | + this.showHead = showHead; | |
| 160 | + }, | |
| 161 | + beforeDestroy () { | |
| 162 | + this.removeScrollEffect(); | |
| 163 | + }, | |
| 164 | + watch: { | |
| 165 | + value (val) { | |
| 166 | + this.visible = val; | |
| 167 | + }, | |
| 168 | + visible (val) { | |
| 169 | + if (val === false) { | |
| 170 | + this.timer = setTimeout(() => { | |
| 171 | + this.wrapShow = false; | |
| 172 | + this.removeScrollEffect(); | |
| 173 | + }, 300); | |
| 174 | + } else { | |
| 175 | + if (this.timer) clearTimeout(this.timer); | |
| 176 | + this.wrapShow = true; | |
| 177 | + if (!this.scrollable) { | |
| 178 | + this.addScrollEffect(); | |
| 179 | + } | |
| 180 | + } | |
| 181 | + this.broadcast('Table', 'on-visible-change', val); | |
| 182 | + this.broadcast('Slider', 'on-visible-change', val); // #2852 | |
| 183 | + this.$emit('on-visible-change', val); | |
| 184 | + }, | |
| 185 | + scrollable (val) { | |
| 186 | + if (!val) { | |
| 187 | + this.addScrollEffect(); | |
| 188 | + } else { | |
| 189 | + this.removeScrollEffect(); | |
| 190 | + } | |
| 191 | + }, | |
| 192 | + title (val) { | |
| 193 | + if (this.$slots.header === undefined) { | |
| 194 | + this.showHead = !!val; | |
| 195 | + } | |
| 196 | + } | |
| 73 | 197 | } |
| 74 | 198 | }; |
| 75 | 199 | </script> |
| 76 | 200 | \ No newline at end of file | ... | ... |
src/components/modal/mixins-scrollbar.js