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 | <template> | 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 | </template> | 25 | </template> |
| 4 | <script> | 26 | <script> |
| 5 | import Icon from '../icon'; | 27 | import Icon from '../icon'; |
| @@ -61,15 +83,117 @@ | @@ -61,15 +83,117 @@ | ||
| 61 | return !this.$IVIEW || this.$IVIEW.transfer === '' ? true : this.$IVIEW.transfer; | 83 | return !this.$IVIEW || this.$IVIEW.transfer === '' ? true : this.$IVIEW.transfer; |
| 62 | } | 84 | } |
| 63 | }, | 85 | }, |
| 86 | + className: { | ||
| 87 | + type: String | ||
| 88 | + } | ||
| 64 | }, | 89 | }, |
| 65 | data () { | 90 | data () { |
| 66 | return { | 91 | return { |
| 67 | prefixCls: prefixCls, | 92 | prefixCls: prefixCls, |
| 68 | visible: this.value, | 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 | methods: { | 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 | </script> | 199 | </script> |
| 76 | \ No newline at end of file | 200 | \ No newline at end of file |
src/components/modal/mixins-scrollbar.js