feat: use rollup to build component
This commit is contained in:
陈嘉涵
@@ -1,22 +0,0 @@
|
||||
/**
|
||||
* 根据父组件名找到对应`parent`
|
||||
*/
|
||||
export default {
|
||||
methods: {
|
||||
findParentByComponentName(name) {
|
||||
if (this.parentGroup) return;
|
||||
|
||||
let parent = this.$parent;
|
||||
while (parent) {
|
||||
if (parent.$options.name === name) {
|
||||
this.parentGroup = parent;
|
||||
break;
|
||||
} else {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
}
|
||||
|
||||
return this.parentGroup;
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,184 +0,0 @@
|
||||
import merge from 'src/utils/merge';
|
||||
import PopupManager from './popup-manager';
|
||||
import PopupContext from './popup-context';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
/**
|
||||
* popup当前显示状态
|
||||
*/
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 是否显示遮罩层
|
||||
*/
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 点击遮罩层是否关闭popup
|
||||
*/
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
zIndex: [String, Number],
|
||||
/**
|
||||
* popup滚动时是否body内容也滚动
|
||||
* 默认为不滚动
|
||||
*/
|
||||
lockOnScroll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
if (val) {
|
||||
if (this.opening) return;
|
||||
this.open();
|
||||
} else {
|
||||
if (this.closing) return;
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
this._popupId = 'popup-' + PopupContext.plusKeyByOne('idSeed');
|
||||
PopupManager.register(this._popupId, this);
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
opening: false,
|
||||
opened: false,
|
||||
closing: false,
|
||||
bodyOverflow: null,
|
||||
pos: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
recordPosition(e) {
|
||||
this.pos = {
|
||||
x: e.touches[0].clientX,
|
||||
y: e.touches[0].clientY
|
||||
};
|
||||
},
|
||||
watchTouchMove(e) {
|
||||
const pos = this.pos;
|
||||
const dx = e.touches[0].clientX - pos.x;
|
||||
const dy = e.touches[0].clientY - pos.y;
|
||||
const direction = dy > 0 ? '10' : '01';
|
||||
const el = this.$el.querySelector('.scroller') || this.$el;
|
||||
const scrollTop = el.scrollTop;
|
||||
const scrollHeight = el.scrollHeight;
|
||||
const offsetHeight = el.offsetHeight;
|
||||
const isVertical = Math.abs(dx) < Math.abs(dy);
|
||||
|
||||
let status = '11';
|
||||
|
||||
if (scrollTop === 0) {
|
||||
status = offsetHeight >= scrollHeight ? '00' : '01';
|
||||
} else if (scrollTop + offsetHeight >= scrollHeight) {
|
||||
status = '10';
|
||||
}
|
||||
|
||||
if (status !== '11' && isVertical && !(parseInt(status, 2) & parseInt(direction, 2))) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 显示popup
|
||||
*/
|
||||
open() {
|
||||
if (this.$isServer) return;
|
||||
if (this.opened) return;
|
||||
|
||||
this.opening = true;
|
||||
|
||||
this.$emit('input', true);
|
||||
|
||||
const zIndex = this.zIndex;
|
||||
|
||||
// 如果属性中传入了`zIndex`，则覆盖`popupContext`中对应的`zIndex`
|
||||
if (zIndex) {
|
||||
PopupContext.setContext('zIndex', zIndex);
|
||||
}
|
||||
|
||||
// 如果显示遮罩层
|
||||
if (this.overlay) {
|
||||
if (this.closing) {
|
||||
PopupManager.closeModal(this._popupId);
|
||||
this.closing = false;
|
||||
}
|
||||
PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), this.$el);
|
||||
|
||||
// 如果滚动时需要锁定
|
||||
if (this.lockOnScroll) {
|
||||
// 将原来的`bodyOverflow`存起来
|
||||
if (!this.bodyOverflow) {
|
||||
this.bodyOverflow = document.body.style.overflow;
|
||||
}
|
||||
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
this.$el.style.zIndex = PopupManager.nextZIndex();
|
||||
this.opened = true;
|
||||
this.opening = false;
|
||||
document.addEventListener('touchstart', this.recordPosition, false);
|
||||
document.addEventListener('touchmove', this.watchTouchMove, false);
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭popup
|
||||
*/
|
||||
close() {
|
||||
if (this.closing) return;
|
||||
|
||||
this.closing = true;
|
||||
|
||||
this.$emit('input', false);
|
||||
|
||||
if (this.lockOnScroll) {
|
||||
setTimeout(() => {
|
||||
if (this.overlay && this.bodyOverflow !== 'hidden') {
|
||||
document.body.style.overflow = this.bodyOverflow;
|
||||
}
|
||||
this.bodyOverflow = null;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
this.opened = false;
|
||||
this.doAfterClose();
|
||||
},
|
||||
|
||||
doAfterClose() {
|
||||
this.closing = false;
|
||||
PopupManager.closeModal(this._popupId);
|
||||
document.removeEventListener('touchstart', this.recordPosition, false);
|
||||
document.removeEventListener('touchmove', this.watchTouchMove, false);
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
PopupManager.deregister(this._popupId);
|
||||
PopupManager.closeModal(this._popupId);
|
||||
|
||||
if (this.overlay && this.bodyOverflow !== null && this.bodyOverflow !== 'hidden') {
|
||||
document.body.style.overflow = this.bodyOverflow;
|
||||
}
|
||||
this.bodyOverflow = null;
|
||||
}
|
||||
};
|
||||
@@ -1,38 +0,0 @@
|
||||
import merge from 'src/utils/merge';
|
||||
import Vue from 'vue';
|
||||
|
||||
let context;
|
||||
const _global = Vue.prototype.$isServer ? global : window;
|
||||
|
||||
if (_global && _global.popupContext) {
|
||||
context = _global.popupContext;
|
||||
}
|
||||
|
||||
const DEFAULT_CONTEXT = {
|
||||
idSeed: 1,
|
||||
zIndex: 2000,
|
||||
hasModal: false,
|
||||
instances: {},
|
||||
modalStack: []
|
||||
};
|
||||
|
||||
context = _global.popupContext = merge({}, DEFAULT_CONTEXT, context);
|
||||
|
||||
const PopupContext = {
|
||||
getContext(key) {
|
||||
return context[key];
|
||||
},
|
||||
|
||||
setContext(key, value) {
|
||||
context[key] = value;
|
||||
},
|
||||
|
||||
plusKeyByOne(key) {
|
||||
const oldVal = +context[key];
|
||||
context[key] = oldVal + 1;
|
||||
|
||||
return oldVal;
|
||||
}
|
||||
};
|
||||
|
||||
export default PopupContext;
|
||||
@@ -1,135 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import { addClass } from 'src/utils/dom';
|
||||
import PopupContext from './popup-context';
|
||||
|
||||
const getModal = function() {
|
||||
if (Vue.prototype.$isServer) return;
|
||||
let modalDom = PopupContext.getContext('modalDom');
|
||||
|
||||
if (modalDom) {
|
||||
PopupContext.setContext('hasModal', true);
|
||||
} else {
|
||||
PopupContext.setContext('hasModal', false);
|
||||
|
||||
modalDom = document.createElement('div');
|
||||
PopupContext.setContext('modalDom', modalDom);
|
||||
|
||||
modalDom.addEventListener('touchmove', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
modalDom.addEventListener('click', function() {
|
||||
PopupManager.handleOverlayClick && PopupManager.handleOverlayClick();
|
||||
});
|
||||
}
|
||||
|
||||
return modalDom;
|
||||
};
|
||||
|
||||
const PopupManager = {
|
||||
nextZIndex() {
|
||||
return PopupContext.plusKeyByOne('zIndex');
|
||||
},
|
||||
|
||||
getInstance(id) {
|
||||
return PopupContext.getContext('instances')[id];
|
||||
},
|
||||
|
||||
register(id, instance) {
|
||||
if (id && instance) {
|
||||
const instances = PopupContext.getContext('instances');
|
||||
instances[id] = instance;
|
||||
}
|
||||
},
|
||||
|
||||
deregister(id) {
|
||||
if (id) {
|
||||
const instances = PopupContext.getContext('instances');
|
||||
instances[id] = null;
|
||||
delete instances[id];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 遮罩层点击回调，`closeOnClickOverlay`为`true`时会关闭当前`popup`
|
||||
*/
|
||||
handleOverlayClick() {
|
||||
const modalStack = PopupContext.getContext('modalStack');
|
||||
const topModal = modalStack[modalStack.length - 1];
|
||||
if (!topModal) return;
|
||||
|
||||
const instance = PopupManager.getInstance(topModal.id);
|
||||
if (instance && instance.closeOnClickOverlay) {
|
||||
instance.close();
|
||||
}
|
||||
},
|
||||
|
||||
openModal(id, zIndex, dom) {
|
||||
if (!id || zIndex === undefined) return;
|
||||
|
||||
const modalStack = PopupContext.getContext('modalStack');
|
||||
|
||||
for (let i = 0, len = modalStack.length; i < len; i++) {
|
||||
const item = modalStack[i];
|
||||
if (item.id === id) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const modalDom = getModal();
|
||||
|
||||
addClass(modalDom, 'van-modal');
|
||||
|
||||
let domParentNode;
|
||||
if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
|
||||
domParentNode = dom.parentNode
|
||||
} else {
|
||||
domParentNode = document.body;
|
||||
}
|
||||
domParentNode.appendChild(modalDom);
|
||||
|
||||
if (zIndex) {
|
||||
modalDom.style.zIndex = zIndex;
|
||||
}
|
||||
modalDom.style.display = '';
|
||||
|
||||
modalStack.push({ id: id, zIndex: zIndex, parentNode: domParentNode });
|
||||
},
|
||||
|
||||
closeModal(id) {
|
||||
const modalStack = PopupContext.getContext('modalStack');
|
||||
const modalDom = getModal();
|
||||
|
||||
if (modalStack.length > 0) {
|
||||
const topItem = modalStack[modalStack.length - 1];
|
||||
if (topItem.id === id) {
|
||||
modalStack.pop();
|
||||
if (modalStack.length > 0) {
|
||||
modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex;
|
||||
modalDom.parentNode.removeChild(modalDom);
|
||||
const currModalParent = modalStack[0].parentNode;
|
||||
currModalParent && currModalParent.appendChild(modalDom);
|
||||
}
|
||||
} else {
|
||||
for (let i = modalStack.length - 1; i >= 0; i--) {
|
||||
if (modalStack[i].id === id) {
|
||||
modalStack.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (modalStack.length === 0) {
|
||||
setTimeout(() => {
|
||||
if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
|
||||
|
||||
modalDom.style.display = 'none';
|
||||
this.modalDom = null;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default PopupManager;
|
||||
Reference in New Issue
Block a user