diff --git a/packages/mixins/popup/context.js b/packages/mixins/popup/context.js index 9f3e5da27..824941339 100644 --- a/packages/mixins/popup/context.js +++ b/packages/mixins/popup/context.js @@ -1,5 +1,5 @@ -const PopupContext = { - idSeed: 1, +export default { + id: 1, zIndex: 2000, stack: [], @@ -11,5 +11,3 @@ const PopupContext = { return this.stack[this.stack.length - 1]; } }; - -export default PopupContext; diff --git a/packages/mixins/popup/index.js b/packages/mixins/popup/index.js index 2a178cb0a..288a46ada 100644 --- a/packages/mixins/popup/index.js +++ b/packages/mixins/popup/index.js @@ -26,17 +26,6 @@ export default { } }, - data() { - this._popupId = 'popup-' + context.plusKey('idSeed'); - return { - opened: false, - pos: { - x: 0, - y: 0 - } - }; - }, - watch: { value(val) { this[val ? 'open' : 'close'](); @@ -44,6 +33,21 @@ export default { getContainer() { this.move(); + }, + + overlay() { + this.renderOverlay(); + } + }, + + created() { + this._popupId = 'popup-' + context.plusKey('id'); + this.pos = { + x: 0, + y: 0 + }; + if (this.value) { + this.open(); } }, @@ -51,24 +55,61 @@ export default { if (this.getContainer) { this.move(); } - if (this.value) { - this.open(); - } }, beforeDestroy() { - this.doAfterClose(); + this.close(); }, methods: { - recordPosition(e) { + open() { + /* istanbul ignore next */ + if (this.$isServer) { + return; + } + + // 如果属性中传入了`zIndex`，则覆盖`context`中对应的`zIndex` + if (this.zIndex !== undefined) { + context.zIndex = this.zIndex; + } + + if (this.lockScroll) { + document.body.classList.add('van-overflow-hidden'); + on(document, 'touchstart', this.onTouchStart); + on(document, 'touchmove', this.onTouchMove); + } + + this.renderOverlay(); + this.$emit('input', true); + }, + + close() { + if (this.lockScroll) { + document.body.classList.remove('van-overflow-hidden'); + off(document, 'touchstart', this.onTouchStart); + off(document, 'touchmove', this.onTouchMove); + } + + manager.close(this._popupId); + this.$emit('input', false); + }, + + move() { + if (this.getContainer) { + this.getContainer().appendChild(this.$el); + } else if (this.$parent) { + this.$parent.$el.appendChild(this.$el); + } + }, + + onTouchStart(e) { this.pos = { x: e.touches[0].clientX, y: e.touches[0].clientY }; }, - watchTouchMove(e) { + onTouchMove(e) { const { pos } = this; const dx = e.touches[0].clientX - pos.x; const dy = e.touches[0].clientY - pos.y; @@ -97,64 +138,17 @@ export default { } }, - open() { - /* istanbul ignore next */ - if (this.opened || this.$isServer) { - return; - } - - // 如果属性中传入了`zIndex`，则覆盖`context`中对应的`zIndex` - if (this.zIndex !== undefined) { - context.zIndex = this.zIndex; - } - + renderOverlay() { if (this.overlay) { manager.open(this, { - id: this._popupId, - dom: this.$el, zIndex: context.plusKey('zIndex'), className: this.overlayClass, customStyle: this.overlayStyle }); + } else { + manager.close(this._popupId); } - - if (this.lockScroll) { - document.body.classList.add('van-overflow-hidden'); - on(document, 'touchstart', this.recordPosition); - on(document, 'touchmove', this.watchTouchMove); - } - this.$el.style.zIndex = context.plusKey('zIndex'); - this.$emit('input', true); - this.opened = true; - }, - - close() { - if (!this.opened || this.$isServer) { - return; - } - - this.$emit('input', false); - this.opened = false; - this.doAfterClose(); - }, - - doAfterClose() { - manager.close(this._popupId); - - if (this.lockScroll) { - document.body.classList.remove('van-overflow-hidden'); - off(document, 'touchstart', this.recordPosition); - off(document, 'touchmove', this.watchTouchMove); - } - }, - - move() { - if (this.getContainer) { - this.getContainer().appendChild(this.$el); - } else if (this.$parent) { - this.$parent.$el.appendChild(this.$el); - } } } }; diff --git a/packages/mixins/popup/manager.js b/packages/mixins/popup/manager.js index 07e878afe..38e026394 100644 --- a/packages/mixins/popup/manager.js +++ b/packages/mixins/popup/manager.js @@ -9,13 +9,13 @@ const defaultConfig = { export default { open(vm, config) { - const { id, dom } = config; - const exist = context.stack.some(item => item.id === id); + const exist = context.stack.some(item => item.id === vm._popupId); /* istanbul ignore next */ if (!exist) { - const targetNode = dom && dom.parentNode && dom.parentNode.nodeType !== 11 ? dom.parentNode : document.body; - context.stack.push({ vm, id, config, targetNode }); + const el = vm.$el; + const targetNode = el && el.parentNode && el.parentNode.nodeType !== 11 ? el.parentNode : document.body; + context.stack.push({ vm, config, targetNode }); this.update(); }; }, @@ -24,11 +24,11 @@ export default { const { stack } = context; if (stack.length) { - if (context.top.id === id) { + if (context.top.vm._popupId === id) { stack.pop(); this.update(); } else { - context.stack = stack.filter(item => item.id !== id); + context.stack = stack.filter(item => item.vm._popupId !== id); } } }, @@ -65,10 +65,8 @@ export default { onClick() { if (context.top) { const { vm } = context.top; - if (vm) { - vm.$emit('click-overlay'); - vm.closeOnClickOverlay && vm.close(); - } + vm.$emit('click-overlay'); + vm.closeOnClickOverlay && vm.close(); } } }; diff --git a/packages/toast/index.js b/packages/toast/index.js index 1b29758ef..be6feed13 100644 --- a/packages/toast/index.js +++ b/packages/toast/index.js @@ -6,10 +6,11 @@ const defaultOptions = { type: 'text', mask: false, message: '', - visible: true, + value: true, duration: 3000, position: 'middle', - forbidClick: false + forbidClick: false, + overlayStyle: {} }; const parseOptions = message => isObj(message) ? message : { message }; @@ -28,6 +29,16 @@ function createInstance() { return queue[queue.length - 1]; }; +// transform toast options to popup props +function transformer(options) { + options.overlay = options.mask; + if (options.forbidClick && !options.overlay) { + options.overlay = true; + options.overlayStyle = { background: 'transparent' }; + } + return options; +} + function Toast(options = {}) { const toast = createInstance(); @@ -35,11 +46,11 @@ function Toast(options = {}) { ...currentOptions, ...parseOptions(options), clear() { - toast.visible = false; + toast.value = false; } }; - Object.assign(toast, options); + Object.assign(toast, transformer(options)); clearTimeout(toast.timer); if (options.duration > 0) { diff --git a/packages/toast/toast.vue b/packages/toast/toast.vue index 1979327db..40789632c 100644 --- a/packages/toast/toast.vue +++ b/packages/toast/toast.vue @@ -1,35 +1,33 @@