wot-design
Version:
Mobile UI components built on vue.js
861 lines (744 loc) • 28 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 = 105);
/******/ })
/************************************************************************/
/******/ ({
/***/ 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();
}
/***/ }),
/***/ 105:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/swipe-action/src/main.vue?vue&type=template&id=67de6796&
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c("div", { staticClass: "wd-swipe-action" }, [
_c(
"div",
{ staticClass: "wd-swipe-action__wrapper", style: _vm.wrapperStyle },
[
_c(
"div",
{
ref: "left",
staticClass: "wd-swipe-action__left",
on: {
"!touchstart": function($event) {
return _vm.onClick($event, "left")
}
}
},
[_vm._t("left")],
2
),
_vm._v(" "),
_c(
"div",
{
staticClass: "wd-swipe-action__content",
on: {
"!touchstart": function($event) {
return _vm.onClick($event, "inside")
}
}
},
[_vm._t("default")],
2
),
_vm._v(" "),
_c(
"div",
{
ref: "right",
staticClass: "wd-swipe-action__right",
on: {
"!touchstart": function($event) {
return _vm.onClick($event, "right")
}
}
},
[_vm._t("right")],
2
)
]
)
])
}
var staticRenderFns = []
render._withStripped = true
// CONCATENATED MODULE: ./packages/swipe-action/src/main.vue?vue&type=template&id=67de6796&
// EXTERNAL MODULE: ./src/mixins/touch.js
var touch = __webpack_require__(14);
// EXTERNAL MODULE: ./src/utils/event.js
var utils_event = __webpack_require__(13);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/swipe-action/src/main.vue?vue&type=script&lang=js&
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/* harmony default export */ var mainvue_type_script_lang_js_ = ({
name: 'WdSwipeAction',
mixins: [touch["a" /* default */]],
props: {
value: {
type: String,
default: 'close'
},
beforeClose: {
type: Function,
default: function _default(v) {
return v;
}
},
disabled: {
type: Boolean,
default: false
},
autoClose: {
type: Boolean,
default: true
}
},
watch: {
value: function value(_value, old) {
this.changeState(_value, old);
}
},
data: function data() {
return {
// 左按钮宽度
leftWidth: 0,
// 右按钮宽度
rightWidth: 0,
// 触摸事件开始时wrapper的偏移量
originOffset: 0,
// wrapper 当前的偏移量
wrapperOffset: 0,
// 是否处于触摸中
touching: false
};
},
computed: {
/**
* @description wrapper 样式计算函数
*/
wrapperStyle: function wrapperStyle() {
return {
transform: "translate3d(".concat(this.wrapperOffset, "px, 0, 0)"),
transitionDuration: this.touching ? '0s' : '.6s'
};
}
},
methods: {
/**
* @description 通过 v-model 切换 滑动按钮
* @param {String} state 要切换到的状态
* @param {String} state 切换之前的状态
*/
changeState: function changeState(state, old) {
var leftWidth = this.leftWidth,
rightWidth = this.rightWidth; // disabled 状态、左右按钮都为空时此方法无任何意义
if (this.disabled || leftWidth === 0 && rightWidth === 0) {
return;
}
switch (state) {
case 'close':
this.close('state', old);
break;
case 'left':
this.wrapperOffset = leftWidth;
break;
case 'right':
this.wrapperOffset = -rightWidth;
break;
}
},
/**
* @description 关闭操过按钮，并在合适的时候调用 beforeClose
*/
close: function close(reason, position) {
// 现在的偏移量为 0 ,close函数没必要使用
if (this.wrapperOffset === 0) return; // 原来的偏移量——>现在的偏移量
if (reason === 'swipe' && this.originOffset === 0) {
// offset：0 ——> offset：0
this.wrapperOffset = 0;
return;
} else if (reason === 'swipe' && this.originOffset > 0) {
// offset > 0 ——> offset：0
position = 'left';
} else if (reason === 'swipe' && this.originOffset < 0) {
// offset < 0 ——> offset：0
position = 'right';
}
if (reason && position) {
this.beforeClose(reason, position);
}
this.wrapperOffset = 0; // 同步给父组件
this.$emit('input', 'close');
},
/**
* @description 时时刻刻监听左/右滑动按钮的尺寸，并保留更新记录
* @param {Element} el 监听的元素
* @param {Function} cb 回调，注意此处this指向mutationObserver，访问Vue实例建议使用监听函数
*/
observerSlotSize: function observerSlotSize(el, cb) {
if (!el) return;
var mutationObserver = new MutationObserver(cb);
mutationObserver.observe(el, {
attributes: true,
attributeFilter: ['style'],
subtree: true
});
this.observerList.push(mutationObserver);
},
/**
* @description 滑动开始的事件句柄
*/
onTouchStart: function onTouchStart(event) {
if (this.disabled) return; // 记录触摸开始时的偏移量，以备后用
this.originOffset = this.wrapperOffset;
this.touchStart(event);
},
/**
* @description 滑动开始的事件句柄
*/
onTouchMove: function onTouchMove(event) {
if (this.disabled) return;
this.touchMove(event);
if (this.direction !== 'horizontal') {
return;
} // 有横向滚动时，句柄才会生效。同时阻止一下事件穿透。
event.stopPropagation();
var leftWidth = this.leftWidth,
rightWidth = this.rightWidth;
var offset = this.originOffset + this.deltaX; // 如果需要想滑出来的按钮不存在，对应的按钮肯定滑不出来，容器处于初始状态。此时需要模拟一下位于此处的start事件。
if (leftWidth === 0 && offset > 0 || rightWidth === 0 && offset < 0) {
this.wrapperOffset = 0;
return this.onTouchStart(event);
} // 按钮已经展示完了，再滑动没有任何意义，相当于滑动结束。此时需要模拟一下位于此处的start事件。
if (leftWidth !== 0 && offset >= leftWidth) {
this.wrapperOffset = leftWidth;
return this.onTouchStart(event);
} else if (rightWidth !== 0 && -offset >= rightWidth) {
this.wrapperOffset = -rightWidth;
return this.onTouchStart(event);
} // 本次行为为滑动跟随手指
this.touching = true; // 本次滑动，wrapper应该设置的偏移量
this.wrapperOffset = offset;
},
/**
* @description 滑动结束的事件句柄
*/
onTouchEnd: function onTouchEnd() {
if (this.disabled) return;
this.touching = false; // 滑出"操作按钮"的阈值
var THRESHOLD = 0.3;
var leftWidth = this.leftWidth,
rightWidth = this.rightWidth;
if (this.originOffset < 0 && // 之前展示的是右按钮
this.wrapperOffset < 0 && // 目前仍然是右按钮
this.wrapperOffset - this.originOffset < rightWidth * THRESHOLD // 并且滑动的范围不超过右边框阀值
) {
this.wrapperOffset = -rightWidth; // 回归右按钮
this.$emit('input', 'right');
} else if (this.originOffset > 0 && // 之前展示的是左按钮
this.wrapperOffset > 0 && // 现在仍然是左按钮
this.originOffset - this.wrapperOffset < leftWidth * THRESHOLD // 并且滑动的范围不超过左按钮阀值
) {
this.wrapperOffset = leftWidth; // 回归左按钮
this.$emit('input', 'left');
} else if (rightWidth > 0 && this.originOffset >= 0 && // 之前是初始状态或者展示左按钮显
this.wrapperOffset < 0 && // 现在展示右按钮
Math.abs(this.wrapperOffset) > rightWidth * THRESHOLD // 视图中已经展示的右按钮长度超过阀值
) {
this.wrapperOffset = -rightWidth;
this.$emit('input', 'right');
} else if (leftWidth > 0 && this.originOffset <= 0 && // 之前初始状态或者右按钮显示
this.wrapperOffset > 0 && // 现在左按钮
Math.abs(this.wrapperOffset) > leftWidth * THRESHOLD // 视图中已经展示的左按钮长度超过阀值
) {
this.wrapperOffset = leftWidth;
this.$emit('input', 'left');
} else {
// 回归初始状态
this.close('swipe');
}
},
/**
* @description 滑动结束的事件句柄
*/
onClick: function onClick(event, position) {
if (this.disabled || this.wrapperOffset === 0) {
return;
} // 点击外部，关闭滑动操作
if (!this.$el.contains(event.target)) {
if (!this.autoClose) return;
position = 'outside';
} // click 了 position 导致了 close 滑动操作
this.close('click', position); // 触发父组件的click事件
this.$emit('click', position);
},
/**
* @description 初始化事件绑定
*/
bindTouchEvent: function bindTouchEvent(el) {
var onTouchStart = this.onTouchStart,
onTouchMove = this.onTouchMove,
onTouchEnd = this.onTouchEnd,
onClick = this.onClick; // Vue 2.6 模板绑定touch事件有毛病(参考官方issue)，此处手动绑定
Object(utils_event["b" /* on */])(el, 'touchstart', onTouchStart);
Object(utils_event["b" /* on */])(el, 'touchmove', onTouchMove);
Object(utils_event["b" /* on */])(el, 'touchend', onTouchEnd);
Object(utils_event["b" /* on */])(el, 'touchcancel', onTouchEnd); // 组件以外的 click 会导致滑动操作关闭
Object(utils_event["b" /* on */])(document, 'touchstart', onClick);
},
/**
* @description addEventListener 对 el 保持引用，此处需要手动移除事件
*/
removeTouchEvent: function removeTouchEvent(el) {
var onTouchStart = this.onTouchStart,
onTouchMove = this.onTouchMove,
onTouchEnd = this.onTouchEnd,
onClick = this.onClick; // Vue 2.6 模板绑定touch事件有毛病(参考官方issue)，此处手动绑定
Object(utils_event["a" /* off */])(el, 'touchstart', onTouchStart);
Object(utils_event["a" /* off */])(el, 'touchmove', onTouchMove);
Object(utils_event["a" /* off */])(el, 'touchend', onTouchEnd);
Object(utils_event["a" /* off */])(el, 'touchcancel', onTouchEnd);
Object(utils_event["a" /* off */])(document, 'click', onClick);
},
/**
* @description 时时刻刻监听左/右滑动按钮的尺寸，并保留更新记录
*/
bindObserver: function bindObserver() {
var _this = this;
var leftElement = this.$refs['left'];
var rightElement = this.$refs['right'];
this.observerSlotSize(leftElement, function () {
_this.leftWidth = leftElement.getBoundingClientRect().width;
});
this.observerSlotSize(rightElement, function () {
_this.rightWidth = rightElement.getBoundingClientRect().width;
});
this.leftWidth = leftElement.getBoundingClientRect().width;
this.rightWidth = rightElement.getBoundingClientRect().width;
}
},
created: function created() {
this.observerList = [];
},
mounted: function mounted() {
this.bindTouchEvent(this.$el);
this.bindObserver();
this.touching = true;
this.changeState(this.value);
this.touching = false;
},
destroyed: function destroyed() {
this.observerList.forEach(function (observer) {
observer.disconnect();
});
this.removeTouchEvent(this.$el);
}
});
// CONCATENATED MODULE: ./packages/swipe-action/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/swipe-action/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/swipe-action/src/main.vue"
/* harmony default export */ var main = (component.exports);
// CONCATENATED MODULE: ./packages/swipe-action/index.js
main.install = function (Vue) {
Vue.component(main.name, main);
};
/* harmony default export */ var swipe_action = __webpack_exports__["default"] = (main);
/***/ }),
/***/ 13:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* unused harmony export supportsPassive */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return on; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return off; });
/* unused harmony export stopPropagation */
/* unused harmony export preventDefault */
/* harmony import */ var _index__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
/**
Copyright 2016-present Youzan
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
// 高版本浏览器监听 document 的 touch 事件时 event.preventDefault 默认无效，需要手动将 passive 设置为 false
var supportsPassive = false;
if (!_index__WEBPACK_IMPORTED_MODULE_0__[/* isServer */ "d"]) {
try {
var opts = {};
Object.defineProperty(opts, 'passive', {
get: function get() {
supportsPassive = true;
}
});
window.addEventListener('test-passive', null, opts);
} catch (e) {}
}
function on(target, event, handler) {
var passive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
if (!_index__WEBPACK_IMPORTED_MODULE_0__[/* isServer */ "d"]) {
target.addEventListener(event, handler, supportsPassive ? {
capture: false,
passive: passive
} : false);
}
}
function off(target, event, handler) {
if (!_index__WEBPACK_IMPORTED_MODULE_0__[/* isServer */ "d"]) {
target.removeEventListener(event, handler);
}
}
function stopPropagation(event) {
event.stopPropagation();
}
function preventDefault(event, isStopPropagation) {
if (typeof event.cancelable !== 'boolean' || event.cancelable) {
event.preventDefault();
}
if (isStopPropagation) {
stopPropagation(event);
}
}
/***/ }),
/***/ 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");
/***/ })
/******/ });