vc-popup
Version:
vue popup components with power position and animation support and back key support as well
1,716 lines (1,458 loc) • 94.8 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("vue"));
else if(typeof define === 'function' && define.amd)
define(["vue"], factory);
else {
var a = typeof exports === 'object' ? factory(require("vue")) : factory(root["vue"]);
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
}
})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_5__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 42);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function(useSourceMap) {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
return this.map(function (item) {
var content = cssWithMappingToString(item, useSourceMap);
if(item[2]) {
return "@media " + item[2] + "{" + content + "}";
} else {
return content;
}
}).join("");
};
// import a list of modules into the list
list.i = function(modules, mediaQuery) {
if(typeof modules === "string")
modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for(var i = 0; i < this.length; i++) {
var id = this[i][0];
if(typeof id === "number")
alreadyImportedModules[id] = true;
}
for(i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if(mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if(mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
function cssWithMappingToString(item, useSourceMap) {
var content = item[1] || '';
var cssMapping = item[3];
if (!cssMapping) {
return content;
}
if (useSourceMap && typeof btoa === 'function') {
var sourceMapping = toComment(cssMapping);
var sourceURLs = cssMapping.sources.map(function (source) {
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
});
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
}
return [content].join('\n');
}
// Adapted from convert-source-map (MIT)
function toComment(sourceMap) {
// eslint-disable-next-line no-undef
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
return '/*# ' + data + ' */';
}
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
Modified by Evan You @yyx990803
*/
var hasDocument = typeof document !== 'undefined'
if (typeof DEBUG !== 'undefined' && DEBUG) {
if (!hasDocument) {
throw new Error(
'vue-style-loader cannot be used in a non-browser environment. ' +
"Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
) }
}
var listToStyles = __webpack_require__(4)
/*
type StyleObject = {
id: number;
parts: Array<StyleObjectPart>
}
type StyleObjectPart = {
css: string;
media: string;
sourceMap: ?string
}
*/
var stylesInDom = {/*
[id: number]: {
id: number,
refs: number,
parts: Array<(obj?: StyleObjectPart) => void>
}
*/}
var head = hasDocument && (document.head || document.getElementsByTagName('head')[0])
var singletonElement = null
var singletonCounter = 0
var isProduction = false
var noop = function () {}
var options = null
var ssrIdKey = 'data-vue-ssr-id'
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
module.exports = function (parentId, list, _isProduction, _options) {
isProduction = _isProduction
options = _options || {}
var styles = listToStyles(parentId, list)
addStylesToDom(styles)
return function update (newList) {
var mayRemove = []
for (var i = 0; i < styles.length; i++) {
var item = styles[i]
var domStyle = stylesInDom[item.id]
domStyle.refs--
mayRemove.push(domStyle)
}
if (newList) {
styles = listToStyles(parentId, newList)
addStylesToDom(styles)
} else {
styles = []
}
for (var i = 0; i < mayRemove.length; i++) {
var domStyle = mayRemove[i]
if (domStyle.refs === 0) {
for (var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j]()
}
delete stylesInDom[domStyle.id]
}
}
}
}
function addStylesToDom (styles /* Array<StyleObject> */) {
for (var i = 0; i < styles.length; i++) {
var item = styles[i]
var domStyle = stylesInDom[item.id]
if (domStyle) {
domStyle.refs++
for (var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j](item.parts[j])
}
for (; j < item.parts.length; j++) {
domStyle.parts.push(addStyle(item.parts[j]))
}
if (domStyle.parts.length > item.parts.length) {
domStyle.parts.length = item.parts.length
}
} else {
var parts = []
for (var j = 0; j < item.parts.length; j++) {
parts.push(addStyle(item.parts[j]))
}
stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
}
}
}
function createStyleElement () {
var styleElement = document.createElement('style')
styleElement.type = 'text/css'
head.appendChild(styleElement)
return styleElement
}
function addStyle (obj /* StyleObjectPart */) {
var update, remove
var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
if (styleElement) {
if (isProduction) {
// has SSR styles and in production mode.
// simply do nothing.
return noop
} else {
// has SSR styles but in dev mode.
// for some reason Chrome can't handle source map in server-rendered
// style tags - source maps in <style> only works if the style tag is
// created and inserted dynamically. So we remove the server rendered
// styles and inject new ones.
styleElement.parentNode.removeChild(styleElement)
}
}
if (isOldIE) {
// use singleton mode for IE9.
var styleIndex = singletonCounter++
styleElement = singletonElement || (singletonElement = createStyleElement())
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
} else {
// use multi-style-tag mode in all other cases
styleElement = createStyleElement()
update = applyToTag.bind(null, styleElement)
remove = function () {
styleElement.parentNode.removeChild(styleElement)
}
}
update(obj)
return function updateStyle (newObj /* StyleObjectPart */) {
if (newObj) {
if (newObj.css === obj.css &&
newObj.media === obj.media &&
newObj.sourceMap === obj.sourceMap) {
return
}
update(obj = newObj)
} else {
remove()
}
}
}
var replaceText = (function () {
var textStore = []
return function (index, replacement) {
textStore[index] = replacement
return textStore.filter(Boolean).join('\n')
}
})()
function applyToSingletonTag (styleElement, index, remove, obj) {
var css = remove ? '' : obj.css
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = replaceText(index, css)
} else {
var cssNode = document.createTextNode(css)
var childNodes = styleElement.childNodes
if (childNodes[index]) styleElement.removeChild(childNodes[index])
if (childNodes.length) {
styleElement.insertBefore(cssNode, childNodes[index])
} else {
styleElement.appendChild(cssNode)
}
}
}
function applyToTag (styleElement, obj) {
var css = obj.css
var media = obj.media
var sourceMap = obj.sourceMap
if (media) {
styleElement.setAttribute('media', media)
}
if (options.ssrId) {
styleElement.setAttribute(ssrIdKey, obj.id)
}
if (sourceMap) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
// http://stackoverflow.com/a/26603875
css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
}
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = css
} else {
while (styleElement.firstChild) {
styleElement.removeChild(styleElement.firstChild)
}
styleElement.appendChild(document.createTextNode(css))
}
}
/***/ }),
/* 2 */
/***/ (function(module, exports) {
/* globals __VUE_SSR_CONTEXT__ */
// IMPORTANT: Do NOT use ES2015 features in this file.
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.
module.exports = function normalizeComponent (
rawScriptExports,
compiledTemplate,
functionalTemplate,
injectStyles,
scopeId,
moduleIdentifier /* server only */
) {
var esModule
var scriptExports = rawScriptExports = rawScriptExports || {}
// ES6 modules interop
var type = typeof rawScriptExports.default
if (type === 'object' || type === 'function') {
esModule = rawScriptExports
scriptExports = rawScriptExports.default
}
// Vue.extend constructor export interop
var options = typeof scriptExports === 'function'
? scriptExports.options
: scriptExports
// render functions
if (compiledTemplate) {
options.render = compiledTemplate.render
options.staticRenderFns = compiledTemplate.staticRenderFns
options._compiled = true
}
// functional template
if (functionalTemplate) {
options.functional = true
}
// scopedId
if (scopeId) {
options._scopeId = scopeId
}
var hook
if (moduleIdentifier) { // server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__
}
// inject component styles
if (injectStyles) {
injectStyles.call(this, context)
}
// register component module identifier for async chunk inferrence
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier)
}
}
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook
} else if (injectStyles) {
hook = injectStyles
}
if (hook) {
var functional = options.functional
var existing = functional
? options.render
: options.beforeCreate
if (!functional) {
// inject component registration as beforeCreate hook
options.beforeCreate = existing
? [].concat(existing, hook)
: [hook]
} else {
// for template-only hot-reload because in that case the render fn doesn't
// go through the normalizer
options._injectStyles = hook
// register for functioal component in vue file
options.render = function renderWithStyleInjection (h, context) {
hook.call(context)
return existing(h, context)
}
}
}
return {
esModule: esModule,
exports: scriptExports,
options: options
}
}
/***/ }),
/* 3 */,
/* 4 */
/***/ (function(module, exports) {
/**
* Translates the list format produced by css-loader into something
* easier to manipulate.
*/
module.exports = function listToStyles (parentId, list) {
var styles = []
var newStyles = {}
for (var i = 0; i < list.length; i++) {
var item = list[i]
var id = item[0]
var css = item[1]
var media = item[2]
var sourceMap = item[3]
var part = {
id: parentId + ':' + i,
css: css,
media: media,
sourceMap: sourceMap
}
if (!newStyles[id]) {
styles.push(newStyles[id] = { id: id, parts: [part] })
} else {
newStyles[id].parts.push(part)
}
}
return styles
}
/***/ }),
/* 5 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_5__;
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.last = last;
exports.countDays = countDays;
exports.offsetMonth = offsetMonth;
exports.monthsBetween = monthsBetween;
exports.throttle = throttle;
exports.fixZero = fixZero;
exports.forEach = forEach;
exports.arrToUrlArg = arrToUrlArg;
function last(arr) {
return arr[arr.length - 1];
}
// 日期相关函数
function countDays(year, month) {
var date;
year = parseInt(year, 10);
month = parseInt(month, 10);
month--; // 月份从0开始算,上面就是从1开始算
if (month === 11) {
month = 0;
year++;
} else {
month++;
}
date = new Date(year, month);
date.setTime(date.getTime() - 100);
return date.getDate();
}
function offsetMonth(year, month) {
var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
if (month < 1 || month > 12) {
console.log('检查到非法month, 范围应该为1~12');
}
year = year + Math.floor((month + offset - 1) / 12);
month = month + offset;
if (offset > 0) {
month = month % 12;
month = month === 0 ? 12 : month;
} else if (offset < 0) {
while (month <= 0) {
month += 12;
}
}
return [year, month];
}
function monthsBetween(y1, m1, y2, m2) {
var months1 = y1 * 12 + m1;
var months2 = y2 * 12 + m2;
return months1 - months2;
}
function throttle(callback, delay) {
var tail = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var timer = null;
var context;
return function () {
if (timer) return;
var args = arguments;
context = this;
if (!tail) callback.apply(context, args);
timer = setTimeout(function () {
timer = null;
if (tail) callback.apply(context, args);
}, delay);
};
}
function fixZero(val) {
if (val < 10) val = '0' + val;
return val;
}
function forEach(obj, func, context) {
for (var p in obj) {
if (context) {
func.call(context, obj[p], p);
} else {
func(obj[p], p);
}
}
}
function arrToUrlArg(obj) {
var arg = '?';
for (var p in obj) {
arg += p + '=' + obj[p] + '&';
}
return arg.slice(0, -1);
}
/***/ }),
/* 7 */,
/* 8 */,
/* 9 */,
/* 10 */,
/* 11 */,
/* 12 */,
/* 13 */,
/* 14 */,
/* 15 */,
/* 16 */,
/* 17 */,
/* 18 */,
/* 19 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _popupController = __webpack_require__(43);
Object.defineProperty(exports, 'default', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_popupController).default;
}
});
var _popupRegister = __webpack_require__(57);
Object.defineProperty(exports, 'popupRegister', {
enumerable: true,
get: function get() {
return _popupRegister.popupRegister;
}
});
var _effectRegister = __webpack_require__(21);
Object.defineProperty(exports, 'effectRegister', {
enumerable: true,
get: function get() {
return _effectRegister.effectRegister;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 20 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _effectRegister = __webpack_require__(21);
exports.default = {
name: 'vc-popup-base',
props: {
e: {
default: null
},
maskDisable: {
type: Boolean,
default: false
},
runtimeConfig: Object
},
data: function data() {
return {
positionType: null
};
},
created: function created() {
this.isShowing = false;
this.$animateDom = null;
this.afterEnterLocker = false;
this.afterLeaveLocker = false;
this._onOpenTimestamp = null;
this._animationConfigurable = null;
this._removeAnimationEndListener = null;
},
methods: {
// 以下是提供给外部使用的
setMaskOpacity: function setMaskOpacity(val) {
this.$refs.mask.style.opacity = val;
},
setMaskBgColor: function setMaskBgColor(val) {
this.$refs.mask.style.backgroundColor = val;
},
addMaskClass: function addMaskClass(name) {
this.$refs.mask.classList.add(name);
},
removeMaskClass: function removeMaskClass(name) {
this.$refs.mask.classList.remove(name);
},
trunOffMaskTransition: function trunOffMaskTransition() {
this.$refs.mask.style.webkitTransitionDuration = '0ms';
},
trunOnMaskTransition: function trunOnMaskTransition() {
this.$refs.mask.style.webkitTransitionDuration = '';
},
setAnimateDom: function setAnimateDom($dom) {
this.$animateDom = $dom;
},
getAnimateDom: function getAnimateDom($dom) {
return this.$animateDom || this.$refs.slot;
},
wrapSlotWith: function wrapSlotWith(TplConstructor, props) {
var vmWrapper = new TplConstructor({
el: document.createElement('div'),
propsData: props
});
this.$refs.slotContainer.appendChild(vmWrapper.$el);
vmWrapper.$refs.slot.appendChild(this.$refs.slot);
this.vmWrapper = vmWrapper;
return vmWrapper;
},
//内部使用的
_turnOffMask: function _turnOffMask() {
!this.maskDisable && this.vmSlot.$popupCtrl.close();
},
_maskPreventScroll: function _maskPreventScroll(e) {
this.isShowing === true && this.runtimeConfig.lockScroll && this.$refs.base === e.target && e.preventDefault();
},
_addAnimationEndListener: function _addAnimationEndListener(callback, lock) {
var _this = this;
var $dom = this.$animateDom || this.$refs.slot;
var safeBellTimer;
this[lock] = false;
var onAnimationEnd = function onAnimationEnd(e) {
if (e.target === $dom) {
if (_this[lock]) return;
_this._removeAnimationEndListener();
callback instanceof Function && callback();
_this[lock] = true;
}
};
$dom.addEventListener('transitionend', onAnimationEnd);
$dom.addEventListener('animationend', onAnimationEnd);
this.hasAnimationEndListener = true;
if (callback === this._afterLeave && Date.now() - this._onOpenTimestamp < 200) {
// 快速关闭的时候, 会导致animationEnd不会触发
safeBellTimer = setTimeout(function () {
onAnimationEnd({
target: $dom
});
}, 200);
}
this._removeAnimationEndListener = function () {
if (_this.hasAnimationEndListener) {
$dom.removeEventListener('transitionend', onAnimationEnd);
$dom.removeEventListener('animationend', onAnimationEnd);
_this.hasAnimationEndListener = false;
if (safeBellTimer) clearTimeout(safeBellTimer);
}
};
},
_beforeMount: function _beforeMount() {
this.$refs.slot.style.webkitTransitionDuration = '0ms';
if (this.runtimeConfig.lockScroll) document.body.style.overflow = 'hidden';
var className = this.runtimeConfig.className;
this._animationConfigurable = this.runtimeConfig.animationConfigurable;
if (typeof className === 'string') this.vmSlot.$el.classList.add(className);else if (className instanceof Array) this.vmSlot.$el.classList.add.apply(this.vmSlot.$el.classList, className);
this.vmSlot.popupEvt.beforeMount && this.vmSlot.popupEvt.beforeMount();
this._animation('beforeMount');
},
_afterMount: function _afterMount() {
this.vmSlot.$popupCtrl.configPosition(this.e);
this._animation('afterMount');
this._enter();
this.vmSlot.popupEvt.afterMount && this.vmSlot.popupEvt.afterMount();
},
_enter: function _enter() {
this._beforeEnter();
this.isShowing = true;
this._onOpenTimestamp = Date.now();
},
_leave: function _leave(callback) {
this._afterLeaveCallback = callback;
this._beforeLeave();
this.isShowing = false;
},
_beforeEnter: function _beforeEnter() {
var _this2 = this;
this._initMask();
var animationCfg = this.runtimeConfig.animation.in;
var maskOpacity = this.runtimeConfig.maskOpacity || 0.25;
var maskBgColor = this.runtimeConfig.maskBgColor;
var hasConfigAnimation = this._animationConfigurable && animationCfg !== undefined;
this.setMaskOpacity(animationCfg !== false ? 0 : maskOpacity);
this._animation('beforeEnter');
this._animation('init');
this.vmSlot.popupEvt.beforeEnter instanceof Function && this.vmSlot.popupEvt.beforeEnter(hasConfigAnimation);
!hasConfigAnimation && this.vmSlot.popupEvt.inAnimation instanceof Function && this.vmSlot.popupEvt.inAnimation();
this.runtimeConfig.beforeEnter instanceof Function && this.runtimeConfig.beforeEnter();
this.getAnimateDom().style.webkitTransitionDuration = '0ms';
this.$nextTick(function () {
requestAnimationFrame(function () {
_this2._addAnimationEndListener(_this2._afterEnter, 'afterEnterLocker');
_this2.$refs.slot.style.webkitTransitionDuration = '';
_this2.getAnimateDom().style.webkitTransitionDuration = '';
_this2.getAnimateDom().classList.add('vc-popup-default-transition');
_this2.setMaskOpacity(maskOpacity);
maskBgColor && _this2.setMaskBgColor(maskBgColor);
});
});
},
_afterEnter: function _afterEnter() {
if (this.animationendTriggered) return;
this._animation('afterEnter');
this.vmSlot.popupEvt.afterEnter instanceof Function && this.vmSlot.popupEvt.afterEnter();
this.runtimeConfig.afterEnter instanceof Function && this.runtimeConfig.afterEnter();
this.animationendTriggered = true;
},
_beforeLeave: function _beforeLeave() {
var _this3 = this;
this._freezeEvents();
this._removeAnimationEndListener();
requestAnimationFrame(function () {
var animationCfg = _this3.runtimeConfig.animation.out;
var hasConfigAnimation = _this3._animationConfigurable && animationCfg !== undefined;
_this3.setMaskOpacity(animationCfg !== false ? 0 : 0.25);
_this3._animation('beforeLeave');
_this3.vmSlot.popupEvt.beforeLeave instanceof Function && _this3.vmSlot.popupEvt.beforeLeave(hasConfigAnimation);
!hasConfigAnimation && _this3.vmSlot.popupEvt.outAnimation instanceof Function && _this3.vmSlot.popupEvt.outAnimation();
_this3.runtimeConfig.beforeLeave instanceof Function && _this3.runtimeConfig.beforeLeave();
_this3._addAnimationEndListener(_this3._afterLeave, 'afterLeaveLocker');
});
},
_afterLeave: function _afterLeave() {
this._animation('afterLeave');
this.vmSlot.popupEvt.afterLeave instanceof Function && this.vmSlot.popupEvt.afterLeave();
this.runtimeConfig.afterLeave instanceof Function && this.runtimeConfig.afterLeave();
this._afterLeaveCallback instanceof Function && this._afterLeaveCallback();
document.body.style.overflow = '';
},
_freezeEvents: function _freezeEvents() {
this.$refs.base.addEventListener('touchstart', this._stopPropagation, true);
this.$refs.base.addEventListener('touchmove', this._stopPropagation, true);
this.$refs.base.addEventListener('touchend', this._stopPropagation, true);
},
_stopPropagation: function _stopPropagation(e) {
e.stopPropagation();
e.preventDefault();
},
_animation: function _animation(evt) {
var _this4 = this;
var animation = this.runtimeConfig.animation;
if (!this._animationConfigurable) return;
if (animation instanceof Object === false) return;
var cfg;
var $dom = this.getAnimateDom();
var isPowerByTransition = animation.init !== undefined;
var animationOffClass = 'vc-animation-fake-off-' + evt;
var evtToCfg = {
beforeMount: 'in',
afterMount: 'in',
beforeEnter: 'in',
afterEnter: 'in',
beforeLeave: 'out',
afterLeave: 'out',
init: 'init'
};
var parseString = function parseString(val, unset) {
if (typeof val === 'string') {
if (!unset) $dom.classList.add(val);else $dom.classList.remove(val);
}
};
var parseBoolean = function parseBoolean(val, unset) {
if (typeof val === 'boolean') {
if (!unset) $dom.classList.add(animationOffClass);else $dom.classList.remove(animationOffClass);
}
};
var parseObject = function parseObject(val) {
var effect;
if (val instanceof Object) {
effect = _effectRegister.effectStack[val.effect];
if (effect) effect[evt] instanceof Function && effect[evt](val, _this4);
}
};
cfg = animation[evtToCfg[evt]];
if (cfg === undefined) return;
if (evt === 'beforeMount' || evt === 'afterMount' || evt === 'afterLeave') {
parseObject(cfg);
cfg instanceof Array && cfg.forEach(function (val) {
parseObject(val);
});
} else if (evt === 'init') {
parseString(cfg);
cfg instanceof Array && cfg.forEach(function (val) {
parseString(val);
});
} else if (evt === 'beforeEnter') {
parseBoolean(cfg);
parseString(cfg);
parseObject(cfg);
isPowerByTransition && this.$nextTick(function () {
requestAnimationFrame(function () {
parseString(cfg, true);
});
});
cfg instanceof Array && cfg.forEach(function (val) {
parseString(val);
parseObject(val);
});
} else if (evt === 'afterEnter') {
parseBoolean(cfg, true);
parseString(cfg, true);
parseObject(cfg);
cfg instanceof Array && cfg.forEach(function (val) {
parseString(val, true);
parseObject(val);
});
} else if (evt === 'beforeLeave') {
parseBoolean(cfg);
parseString(cfg);
parseObject(cfg);
cfg instanceof Array && cfg.forEach(function (val) {
parseString(val);
parseObject(val);
});
}
},
_initMask: function _initMask() {
if (this.runtimeConfig.positionType === 'absolute') {
// 因为背景没有文字, 所以可以使用动画偏移
this.$refs.mask.style.webkitTransform = 'translate(' + window.scrollX + 'px,' + window.scrollY + 'px)';
// mask就跟踪好了, 不使用fixed来做定位的了
if (!this.runtimeConfig.lockScroll) window.addEventListener('scroll', this._maskFollowScroll);
}
},
_maskFollowScroll: function _maskFollowScroll() {
this.$refs.mask.style.webkitTransitionDuration = '0ms';
this.$refs.mask.style.webkitTransform = 'translate(' + window.scrollX + 'px,' + window.scrollY + 'px)';
}
},
destroyed: function destroyed() {
this.$animateDom = null;
window.removeEventListener('scroll', this._maskFollowScroll);
}
}; //
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/***/ }),
/* 21 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var effectStack = {};
function effectRegister(name, processor) {
if (effectStack[name] !== undefined) console.log('\u6CE8\u610F\u5DF2\u5B58\u5728' + name + '\u7684effect, \u5DF2\u8986\u76D6');
effectStack[name] = processor;
}
// 注册内置effect
/**
* zoomFromDom 效果是从触发事件点击的dom节点开始放大, 如其名
* fromDom: HTMLElemet
*/
effectRegister('zoomFromDom', {
beforeEnter: function beforeEnter(cfg, vmBase) {
var $fromDom = cfg.fromDom || (vmBase.e ? vmBase.e.target : null),
$slot = vmBase.vmSlot.$el,
fromDomRect,
slotRect,
scaleAdjusted = 2 / 3,
translateX,
translateY,
fromDomCenterX,
fromDomCenterY,
slotCenterX,
slotCenterY;
if (!$fromDom) throw new Error('无法找到zoomFromDom的参考dom节点, 请检查设置');
if ($fromDom) {
slotRect = $slot.getBoundingClientRect();
fromDomRect = $fromDom.getBoundingClientRect();
if (cfg.scale !== undefined) scaleAdjusted = cfg.scale;
slotCenterX = slotRect.left + slotRect.width / 2;
slotCenterY = slotRect.top + slotRect.height / 2;
fromDomCenterX = fromDomRect.left + fromDomRect.width / 2;
fromDomCenterY = fromDomRect.top + fromDomRect.height / 2;
translateX = fromDomCenterX - slotCenterX;
translateY = fromDomCenterY - slotCenterY;
$slot._x = translateX * scaleAdjusted;
$slot._y = translateY * scaleAdjusted;
$slot._scale = scaleAdjusted;
//无论in或者out都是一样的
$slot.style.opacity = 0;
$slot.style.webkitTransform = 'translate3d(' + $slot._x + 'px, ' + $slot._y + 'px,0) scale(' + $slot._scale + ')';
vmBase.$nextTick(function () {
requestAnimationFrame(function () {
$slot.style.webkitTransform = null;
$slot.style.webkitTransitionDuration = null;
$slot.style.opacity = null;
});
});
}
},
beforeLeave: function beforeLeave(cfg, vmBase) {
var $slot = vmBase.vmSlot.$el;
$slot.style.opacity = 0;
$slot.style.webkitTransform = 'translate3d(' + $slot._x + 'px, ' + $slot._y + 'px,0) scale(' + $slot._scale + ')';
}
});
/**
* addClass 方便添加class的工具, 算是一个内置的拓展, 增加onDom的配置
* value: String | Array
* onDom: HTMLElemet | String(parse by document.querySelector)
*/
effectRegister('addClass', {
beforeEnter: function beforeEnter(cfg, vmBase) {
var $dom = vmBase.vmSlot.$el;
if (typeof cfg.onDom === 'string') $dom = document.querySelector(cfg.onDom);else if (cfg.onDom instanceof HTMLElement) $dom = cfg.onDom;
if (typeof cfg.value === 'string') $dom.classList.add(cfg.value);else if (cfg.value instanceof Array) $dom.classList.add.apply($dom.classList, cfg.value);
},
beforeLeave: function beforeLeave(cfg, vmBase) {
var $dom = vmBase.vmSlot.$el;
if (typeof cfg.onDom === 'string') $dom = document.querySelector(cfg.onDom);else if (cfg.onDom instanceof HTMLElement) $dom = cfg.onDom;
if (typeof cfg.value === 'string') $dom.classList.add(cfg.value);else if (cfg.value instanceof Array) $dom.classList.add.apply($dom.classList, cfg.value);
}
});
/**
* bodyBlur 实现模糊效果, 等同于addClass到#app而已, 这是图个方便
*/
effectRegister('bodyBlur', {
beforeEnter: function beforeEnter() {
document.querySelector('#app').style.filter = 'blur(1.5px)';
},
beforeLeave: function beforeLeave() {
document.querySelector('#app').style.filter = '';
}
});
exports.default = effectRegister;
exports.effectStack = effectStack;
exports.effectRegister = effectRegister;
/***/ }),
/* 22 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
//
//
//
//
//
//
//
//
//
//
//
exports.default = {
name: 'vc-popup-conatiner',
methods: {
addPopup: function addPopup($dom) {
this.$refs.container.appendChild($dom);
},
removePopup: function removePopup($dom) {
this.$refs.container.removeChild($dom);
},
turnOn: function turnOn() {
this.$el.classList.add('on');
},
turnOff: function turnOff() {
this.$el.classList.remove('on');
}
}
};
/***/ }),
/* 23 */,
/* 24 */,
/* 25 */,
/* 26 */,
/* 27 */,
/* 28 */,
/* 29 */,
/* 30 */,
/* 31 */,
/* 32 */,
/* 33 */,
/* 34 */,
/* 35 */,
/* 36 */,
/* 37 */,
/* 38 */,
/* 39 */,
/* 40 */,
/* 41 */,
/* 42 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _popupBase = __webpack_require__(19);
var version = '0.1.25';
var install = function install(Vue) {
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (install.installed) return;
__webpack_require__(19);
};
// auto install
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
exports.default = {
install: install,
version: version,
popupRegister: _popupBase.popupRegister,
effectRegister: _popupBase.effectRegister
};
/***/ }),
/* 43 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Popup = undefined;
var _vue = __webpack_require__(5);
var _vue2 = _interopRequireDefault(_vue);
var _router = __webpack_require__(44);
var _router2 = _interopRequireDefault(_router);
var _popupBase = __webpack_require__(45);
var _popupBase2 = _interopRequireDefault(_popupBase);
var _popupConatiner = __webpack_require__(49);
var _popupConatiner2 = _interopRequireDefault(_popupConatiner);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function top(arr) {
return arr[arr.length - 1];
}
function prev(arr) {
return arr[arr.length - 2];
}
function splitPopupValue(val) {
return val ? decodeURIComponent(val).split('/') : [];
}
var Popup;
if (_vue2.default.prototype.__popup__ !== undefined) {
exports.Popup = Popup = _vue2.default.prototype.__popup__;
} else {
__webpack_require__(53);
__webpack_require__(55);
var popupContainer = null;
var vmBaseOfRouterId = {};
var constructorOfRouterId = {};
var PopupBaseConstructor = _vue2.default.extend(_popupBase2.default);
var PopupContainerConstructor = _vue2.default.extend(_popupConatiner2.default);
var containerInBody = document.body.getElementsByClassName('vc-popup-conatiner');
_router2.default.initialParam('popup');
if (containerInBody.length === 0) {
popupContainer = new PopupContainerConstructor({
el: document.createElement('div')
});
document.body.appendChild(popupContainer.$el);
} else {
popupContainer = containerInBody[0].__vue__;
}
// TODO: 提供全局常用方法来实现引用解耦
_vue2.default.prototype.$popup = {};
_vue2.default.prototype.$popup.prototype = {
$closeTop: function $closeTop() {},
$getPopupCtrls: function $getPopupCtrls() {}
};
_vue2.default.prototype.__popup__ = exports.Popup = Popup = {
fromHashChange: false,
fromUpdateRouter: false,
popupInShowingNum: 0,
lastPageStatus: null,
open: function open(vmBase, routerId) {
popupContainer.turnOn();
this.popupInShowingNum++;
vmBase._beforeMount();
popupContainer.addPopup(vmBase.$el);
vmBase._afterMount();
this.updateRouter(routerId);
this.lastPageStatus = 'showing';
},
close: function close(routerId) {
var _this = this;
var vmBase = vmBaseOfRouterId[routerId];
this.lastPageStatus = 'closing';
vmBase && vmBase._leave(function () {
if (--_this.popupInShowingNum === 0) {
popupContainer.turnOff();
_this.lastPageStatus = 'closed';
}
_this.destroyPopup(routerId);
});
},
register: function register(routerId, trigger) {
constructorOfRouterId[routerId] = trigger;
},
createPopup: function createPopup(config, runtimeConfig, routerId) {
config.runtimeConfig = runtimeConfig;
config.e = runtimeConfig.propsData.e;
return vmBaseOfRouterId[routerId] = new PopupBaseConstructor({
el: document.createElement('div'),
propsData: config
});
},
destroyPopup: function destroyPopup(routerId) {
var vmBase = vmBaseOfRouterId[routerId];
vmBaseOfRouterId[routerId] = undefined;
vmBase.isShowing = false;
popupContainer.removePopup(vmBase.$el);
vmBase.vmSlot.$destroy();
vmBase.$destroy();
},
updateRouter: function updateRouter(popupName) {
if (this.fromHashChange) {
this.fromHashChange = false;
return this.fromHashChange;
}
var value = _router2.default.getParamValue('popup');
if (value && value.split('/').pop() !== popupName) {
value += '/' + popupName;
} else {
value = popupName;
}
this.fromUpdateRouter = true;
_router2.default.parseHashCommand('&popup=' + value);
}
};
// 返回键
_router2.default.listenParam('popup', {
onEnter: function onEnter(val) {
if (Popup.fromUpdateRouter) {
Popup.fromUpdateRouter = false;
return Popup.fromUpdateRouter;
}
var list = splitPopupValue(val);
var trigger = constructorOfRouterId[top(list)];
Popup.fromHashChange = true;
trigger && trigger();
},
onLeave: function onLeave(val, oVal) {
var oList = splitPopupValue(oVal);
var list = splitPopupValue(val);
var oListTop = top(oList);
if (prev(list) !== oListTop) {
Popup.fromUpdateRouter = false;
Popup.fromHashChange = false;
Popup.close(oListTop);
}
},
onBack: function onBack(val) {}
});
// esc键
var ESC_KEY_CODE = 27;
window.addEventListener('keyup', function (e) {
e.keyCode === ESC_KEY_CODE && Popup.lastPageStatus === 'showing' && Popup.popupInShowingNum > 0 && history.back();
});
}
exports.Popup = Popup;
exports.default = Popup;
/***/ }),
/* 44 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Router = undefined;
var _utils = __webpack_require__(6);
var Router = {
history: [],
listeners: {},
init: function init() {
var _this = this;
Object.defineProperty(this.history, 'top', {
get: function get() {
return this[this.length - 1];
}
});
Object.defineProperty(this.history, 'prev', {
get: function get() {
return this[this.length - 2];
}
});
if (window) {
window.addEventListener('popstate', function () {
var hash = location.hash;
var params, lastParams;
// 返回
if (_this.history.prev === hash) {
lastParams = _this.getUrlParams(_this.history.pop());
params = _this.getUrlParams(_this.history.top);
(0, _utils.forEach)(_this.listeners, function (config, name) {
if (params.hasOwnProperty(name)) {
config.onBack(params[name], lastParams[name]);
}
if (lastParams.hasOwnProperty(name)) {
config.onLeave(params[name], lastParams[name]);
}
});
// 前进
} else if (_this.history.top !== hash) {
params = _this.getUrlParams(hash);
lastParams = _this.getUrlParams(_this.history.top);
_this.history.push(hash);
(0, _utils.forEach)(_this.listeners, function (config, name) {
if (params.hasOwnProperty(name)) {
config.onEnter(params[name], lastParams[name]);
}
if (lastParams.hasOwnProperty(name)) {
config.onLeave(params[name], lastParams[name]);
}
});
}
});
this.history.push(location.hash);
}
},
getUrlParams: function getUrlParams(url) {
var params = {};
if (url.indexOf('?') !== -1) {
url = url.slice(url.indexOf('?'));
var str = url.substr(1);
var strs = str.split('&');
for (var i = 0; i < strs.length; i++) {
params[strs[i].split('=')[0]] = strs[i].split('=')[1];
}
}
return params;
},
setUrlParams: function setUrlParams(params) {
history.replaceState({}, null, this.getNoHashUrl() + this.getHashOfParams(params));
},
getNoHashUrl: function getNoHashUrl() {
return location.href.replace(location.hash, '');
},
getHashOfParams: function getHashOfParams(params) {
// 保存非params部分
var hash = location.hash;
if (hash.indexOf('#') === -1) {
hash = '#';
} else if (hash.indexOf('?') !== -1) {
hash = hash.slice(0, hash.indexOf('?', 0));
}
// 生成params部分
hash += '?';
for (var p in params) {
hash += p + '=' + params[p] + '&';
}
return hash.slice(0, hash.length - 1);
},
listenParam: function listenParam(paramName, config) {
this.listeners[paramName] = config;
},
unListenParam: function unListenParam(paramName) {
this.listeners[paramName] = undefined;
},
parseHashCommand: function parseHashCommand(command) {
if (command === '#back') {
history.back();
return;
}
if (command === '#void') {
return;
}
if (command[0] === '&') {
var currentParams = this.getUrlParams(location.hash);
var params = this.getUrlParams('?' + command.slice(1));
var href = location.href;
var hash = location.hash;
for (var p in params) {
currentParams[p] = params[p];
}
command = (0, _utils.arrToUrlArg)(currentParams);
if (hash.indexOf('?') !== -1) {
command = href.slice(0, href.indexOf('#')) + hash.slice(0, hash.indexOf('?')) + command;
} else if (href.indexOf('#') !== -1) {
command = href.slice(0, href.indexOf('#')) + (hash || '#') + command;
} else if (hash === '') {
command = href + '#' + command;
}
} else if (command[0] === '?') {
if (hash.indexOf('?') !== -1) {
command = href.slice(0, href.indexOf('#')) + hash.slice(0, hash.indexOf('?')) + command;
} else if (href.indexOf('#') !== -1) {
command = href.slice(0, href.indexOf('#')) + hash + command;
} else if (hash === '') {
command = href + '#' + command;
}
}
location.href = command;
// window.history.replaceState({}, null, command)
return true;
},
getParamValue: function getParamValue(paramName) {
return this.getUrlParams(location.hash)[paramName];
},
initialParam: function initialParam(paramName) {
// 修复显示两个##问题
if (location.href.indexOf('#') !== 1 && location.hash === '') return;
var params = this.getUrlParams(location.hash);
delete params[paramName];
this.setUrlParams(params);
}
};
Router.init();
exports.Router = Router;
exports.default = Router;
/***/ }),
/* 45 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_popup_base_vue__ = __webpack_require__(20);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_popup_base_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_popup_base_vue__);
/* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_popup_base_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_popup_base_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_76ca6e5c_hasScoped_false_transformToRequire_video_src_source_src_img_src_image_xlink_href_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_popup_base_vue__ = __webpack_require__(48);
var disposed = false
function injectStyle (ssrContext) {
if (disposed) return
__webpack_require__(46)
}
var normalizeComponent = __webpack_require__(2)
/* script */
/* template */
/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = injectStyle
/* scopeId */
var __vue_scopeId__ = null
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_popup_base_vue___default.a,
__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_lib_template_compiler_index_id_data_v_76ca6e5c_hasScoped_false_transformToRequire_video_src_source_src_img_src_image_xlink_href_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_popup_base_vue__["a" /* default */],
__vue_template_functional__,
__vue_styles__,
__vue_scopeId__,
__vue_module_identifier__
)
Component.options.__file = "src\\components\\popup-base\\popup-base.vue"
/* hot reload */
if (false) {(function () {
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-76ca6e5c", Component.options)
} else {
hotAPI.reload("data-v-76ca6e5c", Component.options)
}
module.hot.dispose(function (data) {
disposed = true
})
})()}
/* harmony default export */ __webpack_exports__["default"] = (Component.exports);
/***/ }),
/* 46 */
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(47);
if(typeof content === 'string') content = [[module.i, content, '']];
if(content.locals) module.exports = content.locals;
// add the styles to the DOM
var update = __webpack_require__(1)("0eb4e884", content, false, {});
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../../../node_modules/css-loader/index.js?{\"minimize\":false,\"sourceMap\":false}!../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-76ca6e5c\",\"scoped\":false,\"hasInlineConfig\":false}!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./popup-base.vue", function() {
var newContent = require("!!../../../node_modules/css-loader/index.js?{\"minimize\":false,\"sourceMap\":false}!../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-76ca6e5c\",\"scoped\":false,\"hasInlineConfig\":false}!../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./popup-base.vue");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
/***/ }),
/* 47 */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(0)(false);
// imports
// module
exports.push([module.i, "\n.vc-popup-base{\n width: 100%;\n height: 100%;\n top: 0;\n}\n.vc-popup-slot{\n position: relative;\n z-index: 0;\n height: 0;\n}\n.vc-popup-default-transition {\n -webkit-transition: all 280ms ease;\n transi