wot-design
Version:
Mobile UI components built on vue.js
1,036 lines (906 loc) • 30.9 kB
JavaScript
module.exports =
/******/ (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, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // 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 = 80);
/******/ })
/************************************************************************/
/******/ ({
/***/ 0:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
/* globals __VUE_SSR_CONTEXT__ */
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.
function normalizeComponent (
scriptExports,
render,
staticRenderFns,
functionalTemplate,
injectStyles,
scopeId,
moduleIdentifier, /* server only */
shadowMode /* vue-cli only */
) {
// Vue.extend constructor export interop
var options = typeof scriptExports === 'function'
? scriptExports.options
: scriptExports
// render functions
if (render) {
options.render = render
options.staticRenderFns = staticRenderFns
options._compiled = true
}
// functional template
if (functionalTemplate) {
options.functional = true
}
// scopedId
if (scopeId) {
options._scopeId = 'data-v-' + 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 = shadowMode
? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
: injectStyles
}
if (hook) {
if (options.functional) {
// 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
var originalRender = options.render
options.render = function renderWithStyleInjection (h, context) {
hook.call(context)
return originalRender(h, context)
}
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate
options.beforeCreate = existing
? [].concat(existing, hook)
: [hook]
}
}
return {
exports: scriptExports,
options: options
}
}
/***/ }),
/***/ 1:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return isServer; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return isSupportSticky; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getScrollTargetEvent; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return padZero; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return range; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return isEqual; });
/* unused harmony export bus */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return getType; });
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
var isServer = vue__WEBPACK_IMPORTED_MODULE_0___default.a.prototype.$isServer;
/**
* judge if the browser is support sticky
*/
var isSupportSticky = function isSupportSticky() {
var div = document.createElement('div');
var style = 'display: none; position: -webkit-sticky; position: sticky';
div.style.cssText = style;
var body = document.body;
body.appendChild(div);
var isSupport = /sticky/i.test(window.getComputedStyle(div).position);
body.removeChild(div);
div = null;
return isSupport;
};
/**
* get the overscroll parentNode
* @param {*} element current node
* @param {*} rootElement root node
*/
var getScrollTargetEvent = function getScrollTargetEvent(element) {
var rootElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window;
var currentNode = element;
while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode !== rootElement && currentNode.nodeType === 1) {
var overflowY = document.defaultView.getComputedStyle(currentNode).overflowY;
if (overflowY === 'auto' || overflowY === 'scroll') {
return currentNode;
}
currentNode = currentNode.parentNode;
}
return rootElement;
};
var padZero = function padZero(number) {
var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
number = number + '';
while (number.length < length) {
number = '0' + number;
}
return number;
};
var range = function range(value, min, max) {
return Math.min(Math.max(value, min), max);
};
/** @description 比较数值是否相等 */
var isEqual = function isEqual(value1, value2) {
if (value1 === value2) return true;
if (!(value1 instanceof Array)) return false;
if (!(value2 instanceof Array)) return false;
if (value1.length !== value2.length) return false;
for (var i = 0; i !== value1.length; ++i) {
if (value1[i] !== value2[i]) return false;
}
return true;
};
var bus = new vue__WEBPACK_IMPORTED_MODULE_0___default.a();
/**
* @description 获取目标原始类型
* @param target 任意类型
* @returns {string} type 数据类型
*/
function getType(target) {
// 得到原生类型
var typeStr = Object.prototype.toString.call(target); // 拿到类型值
var type = typeStr.match(/\[object (\w+)\]/)[1]; // 类型值转小写并返回
return type.toLowerCase();
}
/***/ }),
/***/ 14:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
var MIN_DISTANCE = 5;
function getDirection(offsetX, offsetY) {
if (offsetX > MIN_DISTANCE || offsetY > MIN_DISTANCE) {
return offsetX > offsetY ? 'horizontal' : 'vertical';
}
return '';
}
/* harmony default export */ __webpack_exports__["a"] = (vue__WEBPACK_IMPORTED_MODULE_0___default.a.extend({
data: function data() {
return {
direction: '',
accurateDirection: '' // 详细方向
};
},
methods: {
touchStart: function touchStart(event) {
this.resetTouchStatus();
this.startX = event.touches[0].clientX;
this.startY = event.touches[0].clientY;
},
touchMove: function touchMove(event) {
var touch = event.touches[0];
this.deltaX = touch.clientX - this.startX;
this.deltaY = touch.clientY - this.startY;
this.offsetX = Math.abs(this.deltaX);
this.offsetY = Math.abs(this.deltaY);
this.direction = this.direction || getDirection(this.offsetX, this.offsetY);
if (this.direction === 'horizontal') {
this.accurateDirection = this.deltaX > 0 ? 'right' : 'left';
} else if (this.direction === 'vertical') {
this.accurateDirection = this.deltaY > 0 ? 'down' : 'up';
}
},
resetTouchStatus: function resetTouchStatus() {
this.direction = '';
this.accurateDirection = '';
this.deltaX = 0;
this.deltaY = 0;
this.offsetX = 0;
this.offsetY = 0;
}
}
}));
/***/ }),
/***/ 2:
/***/ (function(module, exports) {
module.exports = require("vue");
/***/ }),
/***/ 37:
/***/ (function(module, exports) {
module.exports = require("wot-design/lib/swipe");
/***/ }),
/***/ 38:
/***/ (function(module, exports) {
module.exports = require("wot-design/lib/swipe-item");
/***/ }),
/***/ 80:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// EXTERNAL MODULE: external "vue"
var external_vue_ = __webpack_require__(2);
var external_vue_default = /*#__PURE__*/__webpack_require__.n(external_vue_);
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/img-preview/src/main.vue?vue&type=template&id=3c638ff9&
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c("transition", { attrs: { name: "wd-fade" } }, [
_vm.show
? _c("div", { staticClass: "wd-img-preview" }, [
_c(
"div",
{ staticClass: "wd-img-preview__wrapper" },
[
_c(
"wd-swipe",
{
ref: "swipe",
attrs: {
"hide-indicators": "",
autoplay: false,
"stop-moving": _vm.stopSwipeMoving,
duration: _vm.duration,
"initial-index": _vm.current
},
nativeOn: {
touchstart: function($event) {
return _vm.onWraperTouchStart($event)
},
touchmove: function($event) {
return _vm.onWraperTouchMove($event)
},
touchend: function($event) {
return _vm.onWraperTouchEnd($event)
},
touchcancel: function($event) {
return _vm.onWraperTouchEnd($event)
}
}
},
_vm._l(_vm.urls, function(url, index) {
return _c(
"wd-swipe-item",
{ key: index },
[
_vm._t("index", [
_vm.showIndex
? _c("div", { staticClass: "wd-img-preview__page" }, [
_vm._v(
_vm._s(index + 1) +
" / " +
_vm._s(_vm.urls.length)
)
])
: _vm._e()
]),
_vm._v(" "),
_c(
"div",
{
ref: "img",
refInFor: true,
staticClass: "wd-img-preview__item",
style:
index === _vm.currentIndex ? _vm.imageStyle : null,
on: {
touchstart: function($event) {
return _vm.onImageTouchStart(index)
},
touchmove: _vm.onImageTouchMove,
touchend: _vm.onImageTouchEnd
}
},
[
_c("img", {
staticClass: "wd-img-preview__picture",
attrs: { src: url }
})
]
)
],
2
)
}),
1
)
],
1
)
])
: _vm._e()
])
}
var staticRenderFns = []
render._withStripped = true
// CONCATENATED MODULE: ./packages/img-preview/src/main.vue?vue&type=template&id=3c638ff9&
// EXTERNAL MODULE: ./src/mixins/touch.js
var touch = __webpack_require__(14);
// EXTERNAL MODULE: external "wot-design/lib/swipe"
var swipe_ = __webpack_require__(37);
var swipe_default = /*#__PURE__*/__webpack_require__.n(swipe_);
// EXTERNAL MODULE: external "wot-design/lib/swipe-item"
var swipe_item_ = __webpack_require__(38);
var swipe_item_default = /*#__PURE__*/__webpack_require__.n(swipe_item_);
// EXTERNAL MODULE: ./src/utils/index.js
var utils = __webpack_require__(1);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/img-preview/src/main.vue?vue&type=script&lang=js&
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var SINGLE_CLIK_TIME = 300;
var DOUBLE_CLIK_INTERVAL_TIME = 300;
var LONG_TAP_TIME = 600;
/* harmony default export */ var mainvue_type_script_lang_js_ = ({
name: 'WdImgPreview',
mixins: [touch["a" /* default */]],
components: {
WdSwipe: swipe_default.a,
WdSwipeItem: swipe_item_default.a
},
data: function data() {
return {
show: false,
duration: 0,
// 双指缩放的初始尺寸
startScale: 1,
// 图片移动横轴移动
moveX: 0,
// 图片移动纵轴移动
moveY: 0,
// 图片缩放尺寸
scale: 1,
// 双指缩放标志
zooming: false,
// 图片是否正在移动标志
moving: false,
// 停止轮播图拖动标志
stopSwipeMoving: false,
currentIndex: 0,
// 点击次数（用来衡量是否是双击事件）
clickTimes: 0,
// 两次点击之间的时间间隔处理
doubleClickTimer: null,
initSwipeTimer: null
};
},
props: {
value: Boolean,
urls: {
type: Array,
default: function _default() {
return [];
}
},
// 图片预览 长按事件钩子
onLongTap: Function,
// 图片预览 关闭预览列表钩子
onClose: Function,
// 图片预览 打开预览列表钩子
onOpen: Function,
// 双指缩放最小倍数
minZoom: {
type: Number,
default: 1 / 3
},
// 双指缩放最大倍数
maxZoom: {
type: Number,
default: 3
},
// 初始展示索引
current: {
type: Number,
default: 0
},
// 轮播持续时间
swipeDuration: {
type: Number,
default: 500
},
// 是否展示页码索引
showIndex: {
type: Boolean,
default: true
}
},
computed: {
imageStyle: function imageStyle() {
var scale = this.scale;
var style = {
transitionDuration: this.zooming || this.moving ? '0s' : '.3s'
};
if (scale !== 1) {
style.transform = "scale3d(".concat(scale, ", ").concat(scale, ", 1) translate(").concat(this.moveX / scale, "px, ").concat(this.moveY / scale, "px)");
}
return style;
}
},
watch: {
value: {
handler: function handler(val) {
if (val !== undefined) {
this.show = val;
}
},
immediate: true
},
show: {
handler: function handler(val) {
if (val) {
this.open();
}
},
immediate: true
}
},
methods: {
/**
* @description 关闭预览窗口
*/
close: function close() {
this.show = false;
this.$emit('input', this.show);
this.$emit('close', {
index: this.currentIndex
});
clearTimeout(this.timer);
},
/**
* @description 打开预览窗口
*/
open: function open() {
var _this = this;
this.reset();
if (this.current !== 0) {
// 初始化时将轮播滑动时间置为0，禁用跳转index动画
this.duration = 0;
}
this.timer = setTimeout(function () {
_this.duration = _this.swipeDuration;
}, 30);
this.$emit('open', {
index: this.currentIndex
});
},
/**
* @description 重设参数
*/
reset: function reset() {
this.moveX = 0;
this.moveY = 0;
this.scale = 1;
},
/**
* @description 缩放设置
*/
toggleScale: function toggleScale() {
var scale = this.scale > 1 ? 1 : 2;
this.scale = scale;
this.moveX = 0;
this.moveY = 0;
},
/**
* @description 计算两个触点间的斜向局里
* @param {Array} touches 两个触点
* @return {Number} distance
*/
getDistance: function getDistance(touches) {
return Math.sqrt(Math.pow(touches[0].clientX - touches[1].clientX, 2) + Math.pow(touches[0].clientY - touches[1].clientY, 2));
},
/**
* @description 初始化图片位置信息，用于图片放大时 移动图片查看全图
*/
startMove: function startMove() {
var image = event.currentTarget;
var rect = image.getBoundingClientRect();
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
this.touchStart(event);
this.startMoveX = this.moveX;
this.startMoveY = this.moveY;
this.maxMoveX = Math.max(0, (rect.width - winWidth) / 2);
this.maxMoveY = Math.max(0, (rect.height - winHeight) / 2);
},
/**
* @description 设置图片放大时的移动位置信息
*/
setMoving: function setMoving() {
// 图片拖动标志
this.moving = true;
this.touchMove(event);
var moveX = this.startMoveX + this.deltaX;
var moveY = this.startMoveY + this.deltaY;
this.moveX = Object(utils["g" /* range */])(moveX, -this.maxMoveX, this.maxMoveX);
this.moveY = Object(utils["g" /* range */])(moveY, -this.maxMoveY, this.maxMoveY);
},
/**
* @description 双指缩放初始化
*/
startZoom: function startZoom() {
// 双指缩放期间不能移动图片
this.moving = false; // 缩放开启
this.zooming = true; // 从当前尺寸开始变化
this.startScale = this.scale; // 获取尺寸变化的倍数
this.startDistance = this.getDistance(event.touches);
},
/**
* @description 图片拖动位置初始化，图片上处理两类事件
* 1. 放大后 拖动图片位置
* 2. 双指缩放处理
* @param {Number} index 当前触摸的图片索引
*/
onImageTouchStart: function onImageTouchStart(index) {
this.moving = false; // this.zooming = false
if (this.current !== 0) {
// 初始化时将轮播滑动时间置为0，禁用跳转index动画，此时放开
this.duration = this.swipeDuration;
}
this.currentIndex = index;
var _event = event,
touches = _event.touches; // 图片未缩放，只有一个触点，表示当前是轮播滑动
if (touches.length === 1 && this.scale === 1) {
this.stopSwipeMoving = false;
} else {
this.stopSwipeMoving = true; // 只有一个触点 在放大的情况下，移动图片，禁止图片轮播切换
if (touches.length === 1 && this.scale > 1) {
this.startMove();
} // // 两个触点，双指缩放开启
// if (touches.length === 2) {
// this.startZoom()
// }
}
},
/**
* @description 图片拖动位置移动位置设置
*/
onImageTouchMove: function onImageTouchMove() {
var _event2 = event,
touches = _event2.touches;
/**
* TODO 暂时关闭待优化双指缩放 双指缩放图片
* 1. 获取当前两个触点之间的斜向距离
* 2. 根据当前斜向距离与初始斜向距离的比例 与 当前缩放尺寸计算
*/
// if (this.zooming && touches.length === 2) {
// this.moving = false
// if (this.moving) {
// this.moving = false
// }
// const distance = this.getDistance(touches)
// const scale = (this.startScale * distance) / this.startDistance
// this.scale = range(scale, this.minZoom, this.maxZoom)
// }
if (touches.length === 1 && this.scale !== 1) {
this.setMoving();
}
},
/**
* @description 图片拖动位置结束位置设置
*/
onImageTouchEnd: function onImageTouchEnd() {
var _event3 = event,
touches = _event3.touches;
/**
* 现阶段有三种滑动
* 1. @param {moving} 图片放大时，拖拽图片移动
* 2. @param {zooming} 双指缩放
* 3. @param {stopSwipeMoving} 轮播图切换页码
* 实现以上三种状态互不干扰
*/
if (touches.length && this.scale !== 1) {
this.stopSwipeMoving = false;
this.setMoving();
} // 缩放最后尺寸小于1时，重置尺寸
if (this.scale < 1) {
this.reset();
}
},
/**
* @description 外层touch事件，由于 click 事件 与 touch 事件存在冲突，因此用touch事件模拟点击事件、双击事件、长按事件
* 在外层处理
* 1. 单击关闭
* 2. 双击放大，缩小
*/
onWraperTouchStart: function onWraperTouchStart() {
// 记录初始时间，比对
this.touchStartTime = new Date(); // 开启滑动标志，此时轮播图可手势滑动
this.stopSwipeMoving = false;
},
/**
* @description 外层touch移动
*/
onWraperTouchMove: function onWraperTouchMove() {
var _event4 = event,
touches = _event4.touches; // 判断图片是否处于放大状态且正在移动查看
if (!this.moving) {
/**
* 1. touches.length === 1 根据触点个数判断当前页面是否需要滑动，开启禁止滑动的标志。
* 2. touches.length === 2 表示双指缩放。
* 因为是在moving中一直触发，为避免重复设置标志需要再添加一个标志修改设置
*/
if (touches.length === 1 && !this.stopSwipeMoving) {
this.stopSwipeMoving = true;
} else if (touches.length === 2 && this.stopSwipeMoving) {
this.stopSwipeMoving = false;
}
}
},
/**
* @description 点击结束事件，模拟单击/双击事件，模拟长按事件
* 1. 此处不使用click而是用touch事件模拟，避免冲突
* 2. touch事件一次触发时间少于 300ms 为单击事件
* 3. 两次连续点击少于300ms为双击事件，在此处需要设置延时，如果没有再次点击则为单击事件
* 4. 点击持续600ms为长按事件
*/
onWraperTouchEnd: function onWraperTouchEnd() {
var _this2 = this;
// 轮播动作未进行时触发
if (!this.stopSwipeMoving && !this.moving) {
// 点击事件持续时间
var deltaTime = new Date() - this.touchStartTime;
var _ref = this.$refs.swipe || {},
_ref$offsetX = _ref.offsetX,
offsetX = _ref$offsetX === void 0 ? 0 : _ref$offsetX,
_ref$offsetY = _ref.offsetY,
offsetY = _ref$offsetY === void 0 ? 0 : _ref$offsetY; // 小于 300秒 属于点击事件
if (deltaTime < SINGLE_CLIK_TIME && offsetX < 10 && offsetY < 10) {
this.clickTimes++; // 模拟双击事件
if (this.clickTimes === 2) {
this.clickTimes = 0; // 处理双击事件操作
this.handleDbClick();
} // 模拟单击事件
if (!this.doubleClickTimer) {
this.doubleClickTimer = setTimeout(function () {
// 处理单击事件
if (_this2.clickTimes === 1) {
_this2.clickTimes = 0;
_this2.show && _this2.close();
}
_this2.doubleClickTimer = null;
}, DOUBLE_CLIK_INTERVAL_TIME);
} else {
clearTimeout(this.doubleClickTimer);
this.doubleClickTimer = null;
}
} else if (deltaTime > LONG_TAP_TIME) {
// 超过600毫秒属于长按范围
// 长按事件
this.$emit('long-tap', {
index: this.currentIndex
});
}
}
},
/**
* @description 外层touch移动
*/
handleDbClick: function handleDbClick() {
this.toggleScale();
},
onPopstate: function onPopstate() {
this.show && this.close();
}
},
created: function created() {
window.addEventListener('popstate', this.onPopstate);
},
beforeDestroy: function beforeDestroy() {
// 移除监听
window.removeEventListener('popstate', this.onPopstate);
}
});
// CONCATENATED MODULE: ./packages/img-preview/src/main.vue?vue&type=script&lang=js&
/* harmony default export */ var src_mainvue_type_script_lang_js_ = (mainvue_type_script_lang_js_);
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(0);
// CONCATENATED MODULE: ./packages/img-preview/src/main.vue
/* normalize component */
var component = Object(componentNormalizer["a" /* default */])(
src_mainvue_type_script_lang_js_,
render,
staticRenderFns,
false,
null,
null,
null
)
/* hot reload */
if (false) { var api; }
component.options.__file = "packages/img-preview/src/main.vue"
/* harmony default export */ var main = (component.exports);
// CONCATENATED MODULE: ./packages/img-preview/index.js
var defaultConfig = {
urls: [],
minZoom: 1 / 3,
maxZoom: 3,
onLongTap: null,
onClose: null,
onOpen: null,
showIndex: true,
current: 0,
swipeDuration: 500 // 构造图片预览函数
};
var PreviewConstructor = external_vue_default.a.extend(main);
var imgPreview;
var showPreviewList = function showPreviewList(instance, options) {
instance.show = true;
Object.assign(instance, defaultConfig, options);
if (options.onClose) {
instance.$once('close', options.onClose);
}
if (options.onOpen) {
instance.$once('open', options.onOpen);
}
if (options.onLongTap) {
instance.$on('long-tap', options.onLongTap);
}
if (!instance.inited) {
document.body.appendChild(instance.$el);
instance.inited = true;
}
return instance;
};
var ImgPreview = function ImgPreview(options) {
options = options || {};
if (!imgPreview) {
imgPreview = new PreviewConstructor({
el: document.createElement('div')
});
}
return showPreviewList(imgPreview, options);
};
/* harmony default export */ var img_preview = __webpack_exports__["default"] = ({
install: function install(Vue) {
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
_ref$previewKey = _ref.previewKey,
previewKey = _ref$previewKey === void 0 ? '$preview' : _ref$previewKey;
Vue.component(main.name, main);
Vue.prototype[previewKey] = ImgPreview;
},
wdImgPreview: main,
ImgPreview: ImgPreview
});
/***/ })
/******/ });