vue-flip-page/dist/flip.min.js

2496 lines
93 KiB
JavaScript
Raw Normal View History

2020-02-03 21:34:20 +08:00
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else {
var a = factory();
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
}
})(typeof self !== 'undefined' ? self : this, function() {
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 = "/dist/";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 15);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
// Thank's IE8 for his funny defineProperty
module.exports = !__webpack_require__(4)(function () {
return Object.defineProperty({}, 'a', { get: function () { return 7; } }).a != 7;
});
/***/ }),
/* 1 */
/***/ (function(module, exports) {
// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
var global = module.exports = typeof window != 'undefined' && window.Math == Math
? window : typeof self != 'undefined' && self.Math == Math ? self
// eslint-disable-next-line no-new-func
: Function('return this')();
if (typeof __g == 'number') __g = global; // eslint-disable-line no-undef
/***/ }),
/* 2 */
/***/ (function(module, exports) {
var core = module.exports = { version: '2.6.11' };
if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = function (it) {
return typeof it === 'object' ? it !== null : typeof it === 'function';
};
/***/ }),
/* 4 */
/***/ (function(module, exports) {
module.exports = function (exec) {
try {
return !!exec();
} catch (e) {
return true;
}
};
/***/ }),
/* 5 */
/***/ (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 + ' */';
}
/***/ }),
/* 6 */
/***/ (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__(19)
/*
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))
}
}
/***/ }),
/* 7 */
/***/ (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
}
}
/***/ }),
/* 8 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__turn_controller__ = __webpack_require__(20);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__turn_controller___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__turn_controller__);
//
//
//
//
//
//
//
//
//
//
//
//
/* harmony default export */ __webpack_exports__["a"] = (__WEBPACK_IMPORTED_MODULE_0__turn_controller___default.a);
/***/ }),
/* 9 */
/***/ (function(module, exports) {
var hasOwnProperty = {}.hasOwnProperty;
module.exports = function (it, key) {
return hasOwnProperty.call(it, key);
};
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
// to indexed object, toObject with fallback for non-array-like ES3 strings
var IObject = __webpack_require__(11);
var defined = __webpack_require__(12);
module.exports = function (it) {
return IObject(defined(it));
};
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
// fallback for non-array-like ES3 and non-enumerable old V8 strings
var cof = __webpack_require__(38);
// eslint-disable-next-line no-prototype-builtins
module.exports = Object('z').propertyIsEnumerable(0) ? Object : function (it) {
return cof(it) == 'String' ? it.split('') : Object(it);
};
/***/ }),
/* 12 */
/***/ (function(module, exports) {
// 7.2.1 RequireObjectCoercible(argument)
module.exports = function (it) {
if (it == undefined) throw TypeError("Can't call method on " + it);
return it;
};
/***/ }),
/* 13 */
/***/ (function(module, exports) {
// 7.1.4 ToInteger
var ceil = Math.ceil;
var floor = Math.floor;
module.exports = function (it) {
return isNaN(it = +it) ? 0 : (it > 0 ? floor : ceil)(it);
};
/***/ }),
/* 14 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__turn_page_controller__ = __webpack_require__(53);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__turn_page_controller___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__turn_page_controller__);
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/* harmony default export */ __webpack_exports__["a"] = (__WEBPACK_IMPORTED_MODULE_0__turn_page_controller___default.a);
/***/ }),
/* 15 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _App = __webpack_require__(16);
var _App2 = _interopRequireDefault(_App);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _App2.default;
/***/ }),
/* 16 */
/***/ (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_13_7_3_vue_loader_lib_selector_type_script_index_0_App_vue__ = __webpack_require__(8);
/* empty harmony namespace reexport */
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_13_7_3_vue_loader_lib_template_compiler_index_id_data_v_7ba5bd90_hasScoped_true_buble_transforms_node_modules_vue_loader_13_7_3_vue_loader_lib_selector_type_template_index_0_App_vue__ = __webpack_require__(55);
var disposed = false
function injectStyle (ssrContext) {
if (disposed) return
__webpack_require__(17)
}
var normalizeComponent = __webpack_require__(7)
/* script */
/* template */
/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = injectStyle
/* scopeId */
var __vue_scopeId__ = "data-v-7ba5bd90"
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_3_vue_loader_lib_selector_type_script_index_0_App_vue__["a" /* default */],
__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_13_7_3_vue_loader_lib_template_compiler_index_id_data_v_7ba5bd90_hasScoped_true_buble_transforms_node_modules_vue_loader_13_7_3_vue_loader_lib_selector_type_template_index_0_App_vue__["a" /* default */],
__vue_template_functional__,
__vue_styles__,
__vue_scopeId__,
__vue_module_identifier__
)
Component.options.__file = "src/App.vue"
/* hot reload */
if (false) {(function () {
var hotAPI = require("vue-loader/node_modules/vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-7ba5bd90", Component.options)
} else {
hotAPI.reload("data-v-7ba5bd90", Component.options)
}
module.hot.dispose(function (data) {
disposed = true
})
})()}
/* harmony default export */ __webpack_exports__["default"] = (Component.exports);
/***/ }),
/* 17 */
/***/ (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__(18);
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__(6)("4edd2f67", 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@0.28.11@css-loader/index.js?sourceMap!../node_modules/_vue-loader@13.7.3@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-7ba5bd90\",\"scoped\":true,\"hasInlineConfig\":false}!../node_modules/_sass-loader@6.0.7@sass-loader/lib/loader.js!../node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=styles&index=0!./App.vue", function() {
var newContent = require("!!../node_modules/_css-loader@0.28.11@css-loader/index.js?sourceMap!../node_modules/_vue-loader@13.7.3@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-7ba5bd90\",\"scoped\":true,\"hasInlineConfig\":false}!../node_modules/_sass-loader@6.0.7@sass-loader/lib/loader.js!../node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=styles&index=0!./App.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(); });
}
/***/ }),
/* 18 */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(5)(true);
// imports
// module
exports.push([module.i, "\n.turn[data-v-7ba5bd90] {\n position: relative;\n z-index: 0;\n -webkit-box-shadow: 0 0 0.06rem 0 rgba(0, 0, 0, 0.6);\n box-shadow: 0 0 0.06rem 0 rgba(0, 0, 0, 0.6);\n -webkit-transition: all ease 0.35s;\n transition: all ease 0.35s;\n}\n.manual-item[data-v-7ba5bd90] {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #fff;\n -webkit-transition: all ease 0.35s;\n transition: all ease 0.35s;\n}\n.manual-page[data-v-7ba5bd90] {\n position: relative;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.manual-page.loading[data-v-7ba5bd90] {\n background: url(/article-h5/static/img/loading.95eeac7.gif) no-repeat center center !important;\n background-size: 60px !important;\n}\n.page-photo[data-v-7ba5bd90] {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n font-size: 0;\n line-height: 0;\n width: 100%;\n height: 100%;\n opacity: 1;\n -webkit-transition: opacity ease 0.2s;\n transition: opacity ease 0.2s;\n}\n.manual-page.loading .page-photo[data-v-7ba5bd90] {\n opacity: 0;\n}\n.page-photo[data-v-7ba5bd90]::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n z-index: 2;\n pointer-events: none;\n background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.2)), color-stop(6%, rgba(255, 255, 255, 0.15)), to(rgba(255, 255, 255, 0.15)));\n background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.15) 6%, rgba(255, 255, 255, 0.15) 100%);\n}\n.page-photo img[data-v-7ba5bd90] {\n display: inline-block;\n max-width: 100%;\n max-height: 100%;\n}\n.turn-right-border[data-v-7ba5bd90] {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n z-index: 99;\n -webkit-transform: translate(100%);\n transform: translate(100%);\n width: 10px;\n -webkit-perspective: 500px;\n perspective: 500px;\n -webkit-transform-style: preserve-3d;\n transform-style: preserve-3d;\n}\n.turn-right-border[data-v-7ba5bd90]::after {\n position: relative;\n content: '';\n display: block;\n width: 100%;\n height: 100%;\n background: #fff url(/article-h5/static/img/book-border.3ca9453.png) repeat-y center center;\n -webkit-transform: rotateY(35deg);\n transform: rotateY(35deg);\n -webkit-transform-origin: left center;\n transform-origin: left center;\n}\n.preload[data-v-7ba5bd90] {\n position: fixed;\n z-index: -999;\n left: 0;\n top: 0;\n opacity: 0;\n width: 0;\n height: 0;\n overflow: hidden;\n}\n.page-content[data-v-7ba5bd90] {\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 0.96rem;\n padding: 0.46rem 0.14rem 0;\n background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.92)), to(rgba(0, 0, 0, 0)));\n background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0) 100%);\n pointer-events: none;\n width: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.page-content-type-1[data-v-7ba5bd90] {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.page-content-type-2[data-v-7ba5bd90] {\n text-align: center;\n}\n.page-content .desc[data-v-7ba5bd90] {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n width: calc(65% - 0.14rem);\n}\n.page-content .name[data-v-7ba5bd90] {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-family: PingFangSC-Semibold;\n font-size: 0.16rem;\n color: #FFFFFF;\n line-height: 1;\n}\n.page-content .price[data-v-7ba5bd90] {\n font-family: PingFangSC-Semibold;\n font-size: 0.14rem;\n color: #FFFFFF;\n}\n.page-content .buy-button[data-v-7ba5bd90]
// exports
/***/ }),
/* 19 */
/***/ (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
}
/***/ }),
/* 20 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
2020-02-05 11:05:03 +08:00
value: true
2020-02-03 21:34:20 +08:00
});
var _extends2 = __webpack_require__(21);
var _extends3 = _interopRequireDefault(_extends2);
var _turn_page = __webpack_require__(50);
var _turn_page2 = _interopRequireDefault(_turn_page);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var PI = Math.PI;
var A90 = PI / 2;
2020-02-05 11:05:03 +08:00
//判断微信下ios和安卓 ios为1 安卓为2 其他3
function getPhoneEnv() {
var u = navigator.userAgent,
app = navigator.appVersion;
var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
return "2";
} else if (isIOS) {
return "1";
} else {
return "3";
}
}
2020-02-03 21:34:20 +08:00
function bezier(p1, p2, p3, p4, t) {
2020-02-05 11:05:03 +08:00
var a = 1 - t;
var b = a * a * a;
var c = t * t * t;
return point2D(Math.round(b * p1.x + 3 * t * a * a * p2.x + 3 * t * t * a * p3.x + c * p4.x), Math.round(b * p1.y + 3 * t * a * a * p2.y + 3 * t * t * a * p3.y + c * p4.y));
2020-02-03 21:34:20 +08:00
}
function point2D(x, y) {
2020-02-05 11:05:03 +08:00
return { x: x, y: y };
2020-02-03 21:34:20 +08:00
}
function peelingPoint(a, b, c) {
2020-02-05 11:05:03 +08:00
return {
corner: a,
x: b,
y: c
};
2020-02-03 21:34:20 +08:00
}
function _startPoint(corner, width, height, opts) {
2020-02-05 11:05:03 +08:00
opts = opts || 0;
switch (corner) {
case "tl":
return point2D(opts, opts);
case "tr":
return point2D(width - opts, opts);
case "bl":
return point2D(opts, height - opts);
case "br":
return point2D(width - opts, height - opts);
case "l":
return point2D(opts, 0);
case "r":
return point2D(width - opts, 0);
}
2020-02-03 21:34:20 +08:00
}
function _endPoint(corner, width, height) {
2020-02-05 11:05:03 +08:00
switch (corner) {
case "tl":
return point2D(width * 2, 0);
case "tr":
return point2D(-width, 0);
case "bl":
return point2D(width * 2, height);
case "br":
return point2D(-width, height);
case "l":
return point2D(width * 2, 0);
case "r":
return point2D(-width, 0);
}
2020-02-03 21:34:20 +08:00
}
function _translate(x, y) {
2020-02-05 11:05:03 +08:00
return " translate3d(" + x + "px," + y + "px, 0px) ";
2020-02-03 21:34:20 +08:00
}
function _rotate(degrees) {
2020-02-05 11:05:03 +08:00
return " rotate(" + degrees + "deg) ";
2020-02-03 21:34:20 +08:00
}
function _scale(a, b) {
2020-02-05 11:05:03 +08:00
return " scale3d(" + a + "," + b + ", 1) ";
2020-02-03 21:34:20 +08:00
}
function _deg(radians) {
2020-02-05 11:05:03 +08:00
return radians / PI * 180;
2020-02-03 21:34:20 +08:00
}
function _transform(transform, origin) {
2020-02-05 11:05:03 +08:00
var properties = {};
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
if (origin) properties["transform-origin"] = origin;
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
properties["transform"] = transform;
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
return properties;
2020-02-03 21:34:20 +08:00
}
function fold(point, width, height, startPoint) {
2020-02-05 11:05:03 +08:00
var c = void 0,
d = void 0,
e = void 0,
px = void 0,
gradientSize = void 0,
h = void 0,
far = void 0,
j = void 0,
k = void 0,
l = void 0,
m = void 0,
n = void 0,
q = void 0;
var w = 0;
var mv = point2D(0, 0);
var df = point2D(0, 0);
var tr = point2D(0, 0);
var B = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2), 2);
var compute = function compute() {
c = _startPoint(point.corner, width, height);
var k = width - c.x - point.x;
var l = c.y - point.y;
var alpha = Math.atan2(l, k);
var distance = Math.sqrt(k * k + l * l);
var q = point2D(width - c.x - Math.cos(alpha) * width, c.y - Math.sin(alpha) * width);
if (distance > width) {
point.x = q.x;
point.y = q.y;
}
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
var rel = point2D(0, 0);
var middle = point2D(0, 0);
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
rel.x = c.x ? c.x - point.x : point.x;
rel.y = c.y ? c.y - point.y : point.y;
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
middle.x = e ? width - rel.x / 2 : point.x + rel.x / 2;
middle.y = rel.y / 2;
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
alpha = A90 - Math.atan2(rel.y, rel.x);
var gamma = alpha - Math.atan2(middle.y, middle.x);
distance = Math.sin(gamma) * Math.sqrt(middle.x * middle.x + middle.y * middle.y);
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
tr = point2D(distance * Math.sin(alpha), distance * Math.cos(alpha));
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
if (alpha > A90) {
tr.x = tr.x + Math.abs(tr.y * rel.y / rel.x);
tr.y = 0;
if (Math.round(tr.x * Math.tan(PI - alpha)) < height) {
point.y = Math.sqrt(Math.pow(height, 2) + 2 * middle.x * rel.x);
if (d) point.y = height - point.y;
return compute();
}
var D = PI - alpha;
var E = B - height / Math.sin(D);
mv = point2D(Math.round(E * Math.cos(D)), Math.round(E * Math.sin(D)));
if (e) mv.x = -mv.x;
if (d) mv.y = -mv.y;
}
w = Math.round(100 * _deg(alpha)) / 100;
px = Math.round(tr.y / Math.tan(alpha) + tr.x);
var side = width - px;
var G = Math.min(height, side * Math.tan(alpha));
if (G < 0) G = height;
var sideX = side * Math.cos(2 * alpha);
var sideY = side * Math.sin(2 * alpha);
df = point2D(Math.round(e ? side - sideX : px + sideX), Math.round(d ? sideY : height - sideY));
var endingPoint = _endPoint(point.corner, width, height);
far = Math.sqrt(Math.pow(endingPoint.x - point.x, 2) + Math.pow(endingPoint.y - point.y, 2)) / width;
gradientSize = Math.min(100, side * Math.sin(alpha));
h = 1.3 * Math.min(side, G);
tr.x = Math.round(tr.x);
tr.y = Math.round(tr.y);
return true;
};
var transform = function transform(tr, c, x, a) {
var l = ["0", "auto"];
var mvW = (width - B) * x[0] / 100;
var mvH = (height - B) * x[1] / 100;
var cssA = {
left: l[c[0]],
top: l[c[1]],
right: l[c[2]],
bottom: l[c[3]]
};
var aliasingFk = a !== 90 && a !== -90 ? e ? -1 : 1 : 0;
var origin = x[0] + "% " + x[1] + "%";
var styles = [];
styles.push((0, _extends3.default)({}, cssA, _transform(_rotate(a) + _translate(tr.x + aliasingFk, tr.y), origin)));
styles.push((0, _extends3.default)({}, cssA, _transform(_rotate(a) + _translate(tr.x + df.x - mv.x - width * x[0] / 100, tr.y + df.y - mv.y - height * x[1] / 100) + _rotate(Math.round(100 * (180 / a - 2) * a) / 100), origin)));
styles.push(_transform(_translate(-tr.x + mvW - aliasingFk, -tr.y + mvH) + _rotate(-a), origin));
styles.push(_transform(_translate(width - tr.x + mv.x + mvW, -tr.y + mv.y + mvH) + _rotate(-a), origin));
var z = void 0,
C = void 0,
D = void 0;
if (d) {
if (e) {
C = a - 90;
D = px - 50;
gradientSize = -gradientSize;
z = "50% 25%";
} else {
C = a - 270;
D = width - px - 50;
z = "50% 25%";
}
} else {
if (e) {
D = px - 50;
C = a - 270;
gradientSize = -gradientSize;
z = "50% 75%";
} else {
D = width - px - 50;
C = a - 90;
z = "50% 75%";
}
}
var E = Math.max(0.5, 2 - far);
if (E > 1) E = E >= 1.7 ? (2 - E) / 0.3 : 1;
styles.push((0, _extends3.default)({ opacity: Math.round(100 * E) / 100 }, _transform(_translate(D, 0) + _rotate(C) + _scale(gradientSize / 100, 1), z)));
if (d) {
if (e) {
C = -270 - a;
h = -h;
D = width - px - 20;
z = "20% 25%";
} else {
C = -90 - a;
D = px - 20;
z = "20% 25%";
}
} else {
if (e) {
C = -90 - a;
D = width - px - 20;
h = -h;
z = "20% 75%";
} else {
C = 90 - a;
D = px - 20;
z = "20% 75%";
}
}
E = far < 0.3 ? far / 0.3 : 1;
styles.push((0, _extends3.default)({ opacity: Math.round(100 * E) / 100 }, _transform(_translate(D, 0) + _rotate(C) + _scale(-h / 100, 1), z)));
return styles;
};
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
switch (point.corner) {
case "l":
m = point.y - startPoint.y;
n = point.x;
q = Math.atan2(m, n);
if (q > 0) {
j = startPoint.y;
k = Math.sqrt(n * n + m * m);
l = 2 * j * Math.sin(q) + k;
point.x = l * Math.cos(q);
point.y = l * Math.sin(q);
point.corner = "tl";
e = true;
d = true;
compute();
return transform(tr, [1, 0, 0, 1], [100, 0], w);
} else {
q = -q;
j = height - startPoint.y;
k = Math.sqrt(n * n + m * m);
l = 2 * j * Math.cos(A90 - q) + k;
point.x = l * Math.cos(q);
point.y = height - l * Math.sin(q);
point.corner = "bl";
e = true;
compute();
return transform(point2D(tr.x, -tr.y), [1, 1, 0, 0], [100, 100], -w);
}
case "r":
m = startPoint.y - point.y;
n = width - point.x;
q = Math.atan2(m, n);
if (q < 0) {
j = startPoint.y;
q = -q;
k = Math.sqrt(n * n + m * m);
l = 2 * j * Math.sin(q) + k;
point.x = width - l * Math.cos(q);
point.y = l * Math.sin(q);
point.corner = "tr";
d = true;
compute();
return transform(point2D(-tr.x, tr.y), [0, 0, 0, 1], [0, 0], -w);
} else {
j = height - startPoint.y;
k = Math.sqrt(n * n + m * m);
l = 2 * j * Math.cos(A90 - q) + k;
point.x = width - l * Math.cos(q);
point.y = height - l * Math.sin(q);
point.corner = "br";
compute();
return transform(point2D(-tr.x, -tr.y), [0, 1, 1, 0], [0, 100], w);
}
case "tl":
d = true;
e = true;
point.x = Math.max(point.x, 1);
c = _startPoint("tl", width, height);
compute();
return transform(tr, [1, 0, 0, 1], [100, 0], w);
case "tr":
d = true;
point.x = Math.min(point.x, width - 1);
compute();
return transform(point2D(-tr.x, tr.y), [0, 0, 0, 1], [0, 0], -w);
case "bl":
e = true;
point.x = Math.max(point.x, 1);
compute();
return transform(point2D(tr.x, -tr.y), [1, 1, 0, 0], [100, 100], -w);
case "br":
point.x = Math.min(point.x, width - 1);
compute();
return transform(point2D(-tr.x, -tr.y), [0, 1, 1, 0], [0, 100], w);
}
2020-02-03 21:34:20 +08:00
}
function animatef(point) {
2020-02-05 11:05:03 +08:00
if (!point.to.length) point.to = [point.to];
if (!point.from.length) point.from = [point.from];
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
var diff = [];
var len = point.to.length;
var time = Date.now();
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
var frame = function frame() {
var v = [];
var timeDiff = Math.min(point.duration, Date.now() - time);
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
for (var i = 0; i < len; i++) {
v.push(easing(1, timeDiff, point.from[i], diff[i], point.duration));
}point.frame(len === 1 ? v[0] : v);
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
if (timeDiff === point.duration) {
if (point.complete) point.complete();
} else {
requestAnimationFrameId = requestAnimationFrame(frame);
}
};
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
for (var i = 0; i < len; i++) {
diff.push(point.to[i] - point.from[i]);
}var easing = function easing(x, t, b, c, data) {
return c * Math.sqrt(1 - (t = t / data - 1) * t) + b;
};
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
var requestAnimationFrameId = void 0;
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
frame();
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
return {
stop: function stop() {
if (point.complete) point.complete();
cancelAnimationFrame(requestAnimationFrameId);
}
};
2020-02-03 21:34:20 +08:00
}
function turnPage(p1, duration, width, height, _frame, _complete) {
2020-02-05 11:05:03 +08:00
var p4 = _endPoint(p1.corner, width, height);
return animatef({
from: 0,
to: 1,
frame: function frame(v) {
var np = bezier(p1, p1, p4, p4, v);
_frame({ x: np.x, y: np.y, corner: p1.corner });
},
complete: function complete() {
_complete();
},
duration: duration
});
2020-02-03 21:34:20 +08:00
}
function hideFoldedPage(p1, width, height, _frame2, _complete2) {
2020-02-05 11:05:03 +08:00
var p4 = _startPoint(p1.corner, width, height);
var top = p1.corner.substr(0, 1) === "t";
var delta = top ? Math.min(0, p1.y - p4.y) / 2 : Math.max(0, p1.y - p4.y) / 2;
var p2 = point2D(p1.x, p1.y + delta);
var p3 = point2D(p4.x, p4.y - delta);
return animatef({
from: 0,
to: 1,
frame: function frame(v) {
var np = bezier(p1, p2, p3, p4, v);
_frame2({ x: np.x, y: np.y, corner: p1.corner });
},
complete: function complete() {
_complete2();
},
duration: 600
});
2020-02-03 21:34:20 +08:00
}
function showFoldedPage(to, width, height, _frame3, _complete3) {
2020-02-05 11:05:03 +08:00
var point = _startPoint(to.corner, width, height, 1);
return animatef({
from: [point.x, point.y],
to: [to.x, to.y],
duration: 300,
frame: function frame(v) {
var x = Math.round(v[0]);
var y = Math.round(v[1]);
_frame3({ x: x, y: y, corner: to.corner });
},
complete: function complete() {
_complete3();
}
});
2020-02-03 21:34:20 +08:00
}
exports.default = {
2020-02-05 11:05:03 +08:00
components: { TurnPage: _turn_page2.default },
props: {
data: Array,
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
data: function data() {
return {
defaultStyles: [{}, {}, {}, {}, {}, {}],
startPoint: null,
relPoint: null,
invalidTouch: false,
action: null,
runAnimation: null,
viewIndex: 0,
turnPage: null,
backPage: 0,
turnActive: false,
showLastCoverPage: false,
touchTimeline: [],
styles: [{}, {}, {}, {}, {}, {}],
isStart: false
};
},
mounted: function mounted() {
var _this = this;
this.$nextTick(function () {
_this.TouchMove();
});
},
destroyed: function destroyed() {
var _this2 = this;
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
this.$nextTick(function () {
_this2.TouchMoveOut();
});
},
activated: function activated() {
var _this3 = this;
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
this.$nextTick(function () {
_this3.TouchMove();
});
},
deactivated: function deactivated() {
var _this4 = this;
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
this.$nextTick(function () {
_this4.TouchMoveOut();
});
},
methods: {
TouchMove: function TouchMove() {
if (getPhoneEnv() == 3) {
this.$refs.turn.addEventListener("mousemove", this.handleManualTouchMove, false);
this.$refs.turn.addEventListener("mousedown", this.handleManualTouchStart, false);
this.$refs.turn.addEventListener("mouseup", this.handleManualTouchEnd, false);
} else {
this.$refs.turn.addEventListener("touchmove", this.handleManualTouchMove, false);
this.$refs.turn.addEventListener("touchstart", this.handleManualTouchStart, false);
this.$refs.turn.addEventListener("touchend", this.handleManualTouchEnd, false);
}
},
TouchMoveOut: function TouchMoveOut() {
if (getPhoneEnv() == 3) {
this.$refs.turn.removeEventListener("mousemove", this.handleManualTouchMove, false);
this.$refs.turn.removeEventListener("mousedown", this.handleManualTouchStart, false);
this.$refs.turn.removeEventListener("mouseup", this.handleManualTouchEnd, false);
} else {
this.$refs.turn.removeEventListener("touchmove", this.handleManualTouchMove, false);
this.$refs.turn.removeEventListener("touchstart", this.handleManualTouchStart, false);
this.$refs.turn.removeEventListener("touchend", this.handleManualTouchEnd, false);
}
},
handleManualTouchStart: function handleManualTouchStart(e) {
this.isStart = true;
var x = "";
var y = "";
if (this.runAnimation) {
this.runAnimation.stop();
this.updateTurn();
}
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
var width = this.width,
height = this.height,
viewIndex = this.viewIndex;
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
if (this.fun.getPhoneEnv() == 3) {
x = e.clientX - (window.innerWidth - width) / 2;
y = e.clientY - (window.innerHeight - height) / 2;
} else {
x = e.touches[0].clientX - (window.innerWidth - width) / 2;
y = e.touches[0].clientY - (window.innerHeight - height) / 2;
}
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
this.startPoint = peelingPoint("r", x, y);
this.touchTimeline = [{ t: Date.now(), x: x }];
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
if (x < width / 2) {
this.action = "backward";
if (viewIndex <= 0) {
this.invalidTouch = true;
return;
}
this.turnPage = viewIndex - 1;
this.backPage = viewIndex;
} else {
this.action = "forward";
if (viewIndex >= this.data.length - 1) {
this.invalidTouch = true;
return;
}
this.turnPage = viewIndex;
this.backPage = viewIndex + 1;
}
// console.log(x,this.touchTimeline)
this.readyTurn();
},
handleManualTouchMove: function handleManualTouchMove(e) {
var x = "";
var y = "";
if (this.isStart) {
var width = this.width,
height = this.height;
if (this.fun.getPhoneEnv() == 3) {
x = e.clientX - (window.innerWidth - width) / 2;
y = e.clientY - (window.innerHeight - height) / 2;
} else {
x = e.touches[0].clientX - (window.innerWidth - width) / 2;
y = e.touches[0].clientY - (window.innerHeight - height) / 2;
}
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
var corner = this.startPoint.corner;
if (this.action === "forward" && this.startPoint.x < x) return;
if (this.action === "backward" && this.startPoint.x > x) return;
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
this.touchTimeline.push({ t: Date.now(), x: x });
var point = peelingPoint(corner, x, y);
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
if (this.invalidTouch) return;
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
this.updateTurn(fold(point, width, height, this.startPoint));
this.relPoint = point;
this.turnActive = true;
}
},
handleManualTouchEnd: function handleManualTouchEnd() {
this.isStart = false;
var action = this.action;
if (this.touchTimeline.length < 2) {
if (this.touchTimeline.length) {
this.handleManualTaped();
} else {
this.turnPage = null;
this.backPage = this.viewIndex;
}
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
this.invalidTouch = false;
this.touchTimeline = [];
return;
}
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
if (this.invalidTouch) {
if (action === "forward" && this.isSwipe(action)) {
// this.showLastCoverPage = true
this.$emit("next", { to: this.viewIndex + 1, from: this.viewIndex });
}
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
if (action === "backward" && this.isSwipe(action)) {
this.$emit("prev", { to: this.viewIndex - 1, from: this.viewIndex });
}
} else {
if (action === "forward") {
if (this.isSwipe(action)) {
this.toPage(this.viewIndex + 1, this.relPoint);
} else {
this.hideFolded(this.relPoint, function () {});
}
}
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
if (action === "backward") {
if (this.isSwipe(action)) {
this.toPage(this.viewIndex - 1, this.relPoint);
} else {
this.turn(this.relPoint, function () {});
}
}
}
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
this.invalidTouch = false;
this.touchTimeline = [];
},
handleManualTaped: function handleManualTaped() {
var width = this.width;
var x = this.touchTimeline[0].x;
this.action = null;
if (x < width / 4) return this.toPage(this.viewIndex - 1);
if (x > width / 4 * 3) return this.toPage(this.viewIndex + 1);
this.$emit("tap");
},
readyTurn: function readyTurn() {
var width = this.width,
height = this.height;
var point = this.action === "forward" ? { x: width, y: 0 } : { x: -width, y: 0 };
var fromPoint = peelingPoint("tr", point.x, point.y);
// console.log(fromPoint,"fromPoint");
this.updateTurn(fold(fromPoint, width, height));
},
updateTurn: function updateTurn() {
var style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [{}, {}, {}, {}, {}, {}];
this.styles = style;
},
isSwipe: function isSwipe(action) {
var first = this.touchTimeline[0];
var last = this.touchTimeline[this.touchTimeline.length - 1];
var swipeTime = Date.now() - first.t;
var minTime = 200;
var minDistance = 20;
if (action === "forward") return first.x - last.x > 50 || first.x - last.x > minDistance && swipeTime < minTime;
if (action === "backward") return last.x - first.x > 50 || last.x - first.x > minDistance && swipeTime < minTime;
return false;
},
toPage: function toPage(_toPage, startPoint) {
var _this5 = this;
var fromPage = this.viewIndex;
if (_toPage > fromPage) this.$emit("next", { to: _toPage, from: fromPage });
if (_toPage < fromPage) this.$emit("prev", { to: _toPage, from: fromPage });
if (_toPage === fromPage || _toPage < 0 || _toPage > this.data.length - 1) return;
if (this.runAnimation) {
this.runAnimation.stop();
}
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
var width = this.width,
height = this.height;
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
var point = _toPage > fromPage ? { x: width, y: height - 45 } : { x: -width, y: 45 };
var fromPoint = peelingPoint("br", point.x, point.y);
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
if (_toPage > fromPage) {
if (!this.action) {
this.action = "forward";
this.turnPage = fromPage;
this.backPage = _toPage;
this.turnActive = true;
}
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
this.turn(startPoint || fromPoint, function () {
_this5.viewIndex = _toPage;
_this5.turnPage = null;
_this5.backPage = _toPage;
// console.log('完成翻页,当前页', this.backPage)
_this5.updateTurn();
_this5.turnActive = false;
_this5.$emit("change", _this5.backPage);
});
} else {
if (!this.action) {
this.action = "backward";
this.turnPage = _toPage;
this.backPage = fromPage;
}
2020-02-03 21:34:20 +08:00
2020-02-05 11:05:03 +08:00
this.hideFolded(startPoint || fromPoint, function () {
_this5.viewIndex = _toPage;
_this5.turnPage = null;
_this5.backPage = _toPage;
// console.log('完成翻页,当前页', this.backPage)
_this5.updateTurn();
_this5.turnActive = false;
_this5.$emit("change", _this5.backPage);
});
}
// console.log('this.turnActive', this.turnPage, this.turnActive)
this.$emit("turning", this.backPage);
},
turn: function turn(fromPoint, complete) {
var _this6 = this;
var width = this.width,
height = this.height;
this.runAnimation = turnPage(fromPoint, 600, width, height, function (point) {
_this6.updateTurn(fold(point, width, height));
}, function () {
complete();
_this6.action = null;
_this6.turnPage = null;
_this6.backPage = _this6.viewIndex;
_this6.updateTurn();
_this6.runAnimation = null;
});
},
hideFolded: function hideFolded(fromPoint, complete) {
var _this7 = this;
var width = this.width,
height = this.height;
this.runAnimation = hideFoldedPage(fromPoint, width, height, function (point) {
_this7.updateTurn(fold(point, width, height));
}, function () {
complete();
_this7.action = null;
_this7.turnPage = null;
_this7.backPage = _this7.viewIndex;
_this7.updateTurn();
_this7.turnActive = false;
_this7.runAnimation = null;
});
},
handleCoverTouchStart: function handleCoverTouchStart(e) {
var x = e.touches[0].clientX;
this.touchTimeline = [{ t: Date.now(), x: x }];
},
handleCoverTouchMove: function handleCoverTouchMove(e) {
var x = e.touches[0].clientX;
this.touchTimeline.push({ t: Date.now(), x: x });
},
handleCoverTouchEnd: function handleCoverTouchEnd(e) {
var first = this.touchTimeline[0];
var last = this.touchTimeline[this.touchTimeline.length - 1];
if (last.x - first.x > 20 && last.t - first.t < 200) {
this.showLastCoverPage = false;
}
}
}
2020-02-03 21:34:20 +08:00
};
/***/ }),
/* 21 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var _assign = __webpack_require__(22);
var _assign2 = _interopRequireDefault(_assign);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _assign2.default || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
/***/ }),
/* 22 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = { "default": __webpack_require__(23), __esModule: true };
/***/ }),
/* 23 */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(24);
module.exports = __webpack_require__(2).Object.assign;
/***/ }),
/* 24 */
/***/ (function(module, exports, __webpack_require__) {
// 19.1.3.1 Object.assign(target, source)
var $export = __webpack_require__(25);
$export($export.S + $export.F, 'Object', { assign: __webpack_require__(35) });
/***/ }),
/* 25 */
/***/ (function(module, exports, __webpack_require__) {
var global = __webpack_require__(1);
var core = __webpack_require__(2);
var ctx = __webpack_require__(26);
var hide = __webpack_require__(28);
var has = __webpack_require__(9);
var PROTOTYPE = 'prototype';
var $export = function (type, name, source) {
var IS_FORCED = type & $export.F;
var IS_GLOBAL = type & $export.G;
var IS_STATIC = type & $export.S;
var IS_PROTO = type & $export.P;
var IS_BIND = type & $export.B;
var IS_WRAP = type & $export.W;
var exports = IS_GLOBAL ? core : core[name] || (core[name] = {});
var expProto = exports[PROTOTYPE];
var target = IS_GLOBAL ? global : IS_STATIC ? global[name] : (global[name] || {})[PROTOTYPE];
var key, own, out;
if (IS_GLOBAL) source = name;
for (key in source) {
// contains in native
own = !IS_FORCED && target && target[key] !== undefined;
if (own && has(exports, key)) continue;
// export native or passed
out = own ? target[key] : source[key];
// prevent global pollution for namespaces
exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key]
// bind timers to global for call from export context
: IS_BIND && own ? ctx(out, global)
// wrap global constructors for prevent change them in library
: IS_WRAP && target[key] == out ? (function (C) {
var F = function (a, b, c) {
if (this instanceof C) {
switch (arguments.length) {
case 0: return new C();
case 1: return new C(a);
case 2: return new C(a, b);
} return new C(a, b, c);
} return C.apply(this, arguments);
};
F[PROTOTYPE] = C[PROTOTYPE];
return F;
// make static versions for prototype methods
})(out) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out;
// export proto methods to core.%CONSTRUCTOR%.methods.%NAME%
if (IS_PROTO) {
(exports.virtual || (exports.virtual = {}))[key] = out;
// export proto methods to core.%CONSTRUCTOR%.prototype.%NAME%
if (type & $export.R && expProto && !expProto[key]) hide(expProto, key, out);
}
}
};
// type bitmap
$export.F = 1; // forced
$export.G = 2; // global
$export.S = 4; // static
$export.P = 8; // proto
$export.B = 16; // bind
$export.W = 32; // wrap
$export.U = 64; // safe
$export.R = 128; // real proto method for `library`
module.exports = $export;
/***/ }),
/* 26 */
/***/ (function(module, exports, __webpack_require__) {
// optional / simple context binding
var aFunction = __webpack_require__(27);
module.exports = function (fn, that, length) {
aFunction(fn);
if (that === undefined) return fn;
switch (length) {
case 1: return function (a) {
return fn.call(that, a);
};
case 2: return function (a, b) {
return fn.call(that, a, b);
};
case 3: return function (a, b, c) {
return fn.call(that, a, b, c);
};
}
return function (/* ...args */) {
return fn.apply(that, arguments);
};
};
/***/ }),
/* 27 */
/***/ (function(module, exports) {
module.exports = function (it) {
if (typeof it != 'function') throw TypeError(it + ' is not a function!');
return it;
};
/***/ }),
/* 28 */
/***/ (function(module, exports, __webpack_require__) {
var dP = __webpack_require__(29);
var createDesc = __webpack_require__(34);
module.exports = __webpack_require__(0) ? function (object, key, value) {
return dP.f(object, key, createDesc(1, value));
} : function (object, key, value) {
object[key] = value;
return object;
};
/***/ }),
/* 29 */
/***/ (function(module, exports, __webpack_require__) {
var anObject = __webpack_require__(30);
var IE8_DOM_DEFINE = __webpack_require__(31);
var toPrimitive = __webpack_require__(33);
var dP = Object.defineProperty;
exports.f = __webpack_require__(0) ? Object.defineProperty : function defineProperty(O, P, Attributes) {
anObject(O);
P = toPrimitive(P, true);
anObject(Attributes);
if (IE8_DOM_DEFINE) try {
return dP(O, P, Attributes);
} catch (e) { /* empty */ }
if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!');
if ('value' in Attributes) O[P] = Attributes.value;
return O;
};
/***/ }),
/* 30 */
/***/ (function(module, exports, __webpack_require__) {
var isObject = __webpack_require__(3);
module.exports = function (it) {
if (!isObject(it)) throw TypeError(it + ' is not an object!');
return it;
};
/***/ }),
/* 31 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = !__webpack_require__(0) && !__webpack_require__(4)(function () {
return Object.defineProperty(__webpack_require__(32)('div'), 'a', { get: function () { return 7; } }).a != 7;
});
/***/ }),
/* 32 */
/***/ (function(module, exports, __webpack_require__) {
var isObject = __webpack_require__(3);
var document = __webpack_require__(1).document;
// typeof document.createElement is 'object' in old IE
var is = isObject(document) && isObject(document.createElement);
module.exports = function (it) {
return is ? document.createElement(it) : {};
};
/***/ }),
/* 33 */
/***/ (function(module, exports, __webpack_require__) {
// 7.1.1 ToPrimitive(input [, PreferredType])
var isObject = __webpack_require__(3);
// instead of the ES6 spec version, we didn't implement @@toPrimitive case
// and the second argument - flag - preferred type is a string
module.exports = function (it, S) {
if (!isObject(it)) return it;
var fn, val;
if (S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val;
if (typeof (fn = it.valueOf) == 'function' && !isObject(val = fn.call(it))) return val;
if (!S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val;
throw TypeError("Can't convert object to primitive value");
};
/***/ }),
/* 34 */
/***/ (function(module, exports) {
module.exports = function (bitmap, value) {
return {
enumerable: !(bitmap & 1),
configurable: !(bitmap & 2),
writable: !(bitmap & 4),
value: value
};
};
/***/ }),
/* 35 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
// 19.1.2.1 Object.assign(target, source, ...)
var DESCRIPTORS = __webpack_require__(0);
var getKeys = __webpack_require__(36);
var gOPS = __webpack_require__(47);
var pIE = __webpack_require__(48);
var toObject = __webpack_require__(49);
var IObject = __webpack_require__(11);
var $assign = Object.assign;
// should work with symbols and should have deterministic property order (V8 bug)
module.exports = !$assign || __webpack_require__(4)(function () {
var A = {};
var B = {};
// eslint-disable-next-line no-undef
var S = Symbol();
var K = 'abcdefghijklmnopqrst';
A[S] = 7;
K.split('').forEach(function (k) { B[k] = k; });
return $assign({}, A)[S] != 7 || Object.keys($assign({}, B)).join('') != K;
}) ? function assign(target, source) { // eslint-disable-line no-unused-vars
var T = toObject(target);
var aLen = arguments.length;
var index = 1;
var getSymbols = gOPS.f;
var isEnum = pIE.f;
while (aLen > index) {
var S = IObject(arguments[index++]);
var keys = getSymbols ? getKeys(S).concat(getSymbols(S)) : getKeys(S);
var length = keys.length;
var j = 0;
var key;
while (length > j) {
key = keys[j++];
if (!DESCRIPTORS || isEnum.call(S, key)) T[key] = S[key];
}
} return T;
} : $assign;
/***/ }),
/* 36 */
/***/ (function(module, exports, __webpack_require__) {
// 19.1.2.14 / 15.2.3.14 Object.keys(O)
var $keys = __webpack_require__(37);
var enumBugKeys = __webpack_require__(46);
module.exports = Object.keys || function keys(O) {
return $keys(O, enumBugKeys);
};
/***/ }),
/* 37 */
/***/ (function(module, exports, __webpack_require__) {
var has = __webpack_require__(9);
var toIObject = __webpack_require__(10);
var arrayIndexOf = __webpack_require__(39)(false);
var IE_PROTO = __webpack_require__(42)('IE_PROTO');
module.exports = function (object, names) {
var O = toIObject(object);
var i = 0;
var result = [];
var key;
for (key in O) if (key != IE_PROTO) has(O, key) && result.push(key);
// Don't enum bug & hidden keys
while (names.length > i) if (has(O, key = names[i++])) {
~arrayIndexOf(result, key) || result.push(key);
}
return result;
};
/***/ }),
/* 38 */
/***/ (function(module, exports) {
var toString = {}.toString;
module.exports = function (it) {
return toString.call(it).slice(8, -1);
};
/***/ }),
/* 39 */
/***/ (function(module, exports, __webpack_require__) {
// false -> Array#indexOf
// true -> Array#includes
var toIObject = __webpack_require__(10);
var toLength = __webpack_require__(40);
var toAbsoluteIndex = __webpack_require__(41);
module.exports = function (IS_INCLUDES) {
return function ($this, el, fromIndex) {
var O = toIObject($this);
var length = toLength(O.length);
var index = toAbsoluteIndex(fromIndex, length);
var value;
// Array#includes uses SameValueZero equality algorithm
// eslint-disable-next-line no-self-compare
if (IS_INCLUDES && el != el) while (length > index) {
value = O[index++];
// eslint-disable-next-line no-self-compare
if (value != value) return true;
// Array#indexOf ignores holes, Array#includes - not
} else for (;length > index; index++) if (IS_INCLUDES || index in O) {
if (O[index] === el) return IS_INCLUDES || index || 0;
} return !IS_INCLUDES && -1;
};
};
/***/ }),
/* 40 */
/***/ (function(module, exports, __webpack_require__) {
// 7.1.15 ToLength
var toInteger = __webpack_require__(13);
var min = Math.min;
module.exports = function (it) {
return it > 0 ? min(toInteger(it), 0x1fffffffffffff) : 0; // pow(2, 53) - 1 == 9007199254740991
};
/***/ }),
/* 41 */
/***/ (function(module, exports, __webpack_require__) {
var toInteger = __webpack_require__(13);
var max = Math.max;
var min = Math.min;
module.exports = function (index, length) {
index = toInteger(index);
return index < 0 ? max(index + length, 0) : min(index, length);
};
/***/ }),
/* 42 */
/***/ (function(module, exports, __webpack_require__) {
var shared = __webpack_require__(43)('keys');
var uid = __webpack_require__(45);
module.exports = function (key) {
return shared[key] || (shared[key] = uid(key));
};
/***/ }),
/* 43 */
/***/ (function(module, exports, __webpack_require__) {
var core = __webpack_require__(2);
var global = __webpack_require__(1);
var SHARED = '__core-js_shared__';
var store = global[SHARED] || (global[SHARED] = {});
(module.exports = function (key, value) {
return store[key] || (store[key] = value !== undefined ? value : {});
})('versions', []).push({
version: core.version,
mode: __webpack_require__(44) ? 'pure' : 'global',
copyright: '© 2019 Denis Pushkarev (zloirock.ru)'
});
/***/ }),
/* 44 */
/***/ (function(module, exports) {
module.exports = true;
/***/ }),
/* 45 */
/***/ (function(module, exports) {
var id = 0;
var px = Math.random();
module.exports = function (key) {
return 'Symbol('.concat(key === undefined ? '' : key, ')_', (++id + px).toString(36));
};
/***/ }),
/* 46 */
/***/ (function(module, exports) {
// IE 8- don't enum bug keys
module.exports = (
'constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf'
).split(',');
/***/ }),
/* 47 */
/***/ (function(module, exports) {
exports.f = Object.getOwnPropertySymbols;
/***/ }),
/* 48 */
/***/ (function(module, exports) {
exports.f = {}.propertyIsEnumerable;
/***/ }),
/* 49 */
/***/ (function(module, exports, __webpack_require__) {
// 7.1.13 ToObject(argument)
var defined = __webpack_require__(12);
module.exports = function (it) {
return Object(defined(it));
};
/***/ }),
/* 50 */
/***/ (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_13_7_3_vue_loader_lib_selector_type_script_index_0_turn_page_vue__ = __webpack_require__(14);
/* empty harmony namespace reexport */
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_13_7_3_vue_loader_lib_template_compiler_index_id_data_v_5b69e508_hasScoped_true_buble_transforms_node_modules_vue_loader_13_7_3_vue_loader_lib_selector_type_template_index_0_turn_page_vue__ = __webpack_require__(54);
var disposed = false
function injectStyle (ssrContext) {
if (disposed) return
__webpack_require__(51)
}
var normalizeComponent = __webpack_require__(7)
/* script */
/* template */
/* template functional */
var __vue_template_functional__ = false
/* styles */
var __vue_styles__ = injectStyle
/* scopeId */
var __vue_scopeId__ = "data-v-5b69e508"
/* moduleIdentifier (server only) */
var __vue_module_identifier__ = null
var Component = normalizeComponent(
__WEBPACK_IMPORTED_MODULE_0__babel_loader_node_modules_vue_loader_13_7_3_vue_loader_lib_selector_type_script_index_0_turn_page_vue__["a" /* default */],
__WEBPACK_IMPORTED_MODULE_1__node_modules_vue_loader_13_7_3_vue_loader_lib_template_compiler_index_id_data_v_5b69e508_hasScoped_true_buble_transforms_node_modules_vue_loader_13_7_3_vue_loader_lib_selector_type_template_index_0_turn_page_vue__["a" /* default */],
__vue_template_functional__,
__vue_styles__,
__vue_scopeId__,
__vue_module_identifier__
)
Component.options.__file = "src/turn_page.vue"
/* hot reload */
if (false) {(function () {
var hotAPI = require("vue-loader/node_modules/vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-5b69e508", Component.options)
} else {
hotAPI.reload("data-v-5b69e508", Component.options)
}
module.hot.dispose(function (data) {
disposed = true
})
})()}
/* harmony default export */ __webpack_exports__["default"] = (Component.exports);
/***/ }),
/* 51 */
/***/ (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__(52);
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__(6)("45ac88f7", 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@0.28.11@css-loader/index.js?sourceMap!../node_modules/_vue-loader@13.7.3@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-5b69e508\",\"scoped\":true,\"hasInlineConfig\":false}!../node_modules/_sass-loader@6.0.7@sass-loader/lib/loader.js!../node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=styles&index=0!./turn_page.vue", function() {
var newContent = require("!!../node_modules/_css-loader@0.28.11@css-loader/index.js?sourceMap!../node_modules/_vue-loader@13.7.3@vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-5b69e508\",\"scoped\":true,\"hasInlineConfig\":false}!../node_modules/_sass-loader@6.0.7@sass-loader/lib/loader.js!../node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=styles&index=0!./turn_page.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(); });
}
/***/ }),
/* 52 */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(5)(true);
// imports
// module
exports.push([module.i, "\n.turn-wraper[data-v-5b69e508] {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n pointer-events: none;\n -webkit-transition: all ease 0.35s;\n transition: all ease 0.35s;\n}\n.turn-page-left[data-v-5b69e508] {\n position: absolute;\n top: 0;\n z-index: 5;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n.turn-page-left-clip[data-v-5b69e508] {\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n}\n.turn-page-left-content[data-v-5b69e508] {\n position: absolute;\n overflow: hidden;\n background-color: #fff;\n}\n.turn-page-left-inner[data-v-5b69e508] {\n width: 100%;\n height: 100%;\n -webkit-transform: rotateY(180deg);\n transform: rotateY(180deg);\n opacity: 0.3;\n -webkit-transition: width all ease 0.35s, height all ease 0.35s;\n transition: width all ease 0.35s, height all ease 0.35s;\n}\n.turn-page-left-gradient[data-v-5b69e508] {\n position: absolute;\n z-index: 99;\n width: 100px;\n -webkit-transform: scale3d(0, 1, 1);\n transform: scale3d(0, 1, 1);\n background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(0, 0, 0, 0)), color-stop(0.3, rgba(0, 0, 0, 0.2)), color-stop(0.5, rgba(0, 0, 0, 0.5)));\n}\n.turn-page-right[data-v-5b69e508] {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 4;\n overflow: hidden;\n}\n.turn-page-right-gradient[data-v-5b69e508] {\n position: absolute;\n z-index: 2;\n width: 100px;\n opacity: 1;\n -webkit-transform: scale3d(0, 1, 1);\n transform: scale3d(0, 1, 1);\n background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(rgba(0, 0, 0, 0)), color-stop(0.2, rgba(0, 0, 0, 0.3)), color-stop(0.2, rgba(0, 0, 0, 0.4)), color-stop(0.4, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0)));\n}\n.turn-page-right-clip[data-v-5b69e508] {\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n z-index: auto;\n}\n.turn-page-right-content[data-v-5b69e508] {\n position: absolute;\n overflow: hidden;\n z-index: 1;\n transition: width all ease 0.35s, height all ease 0.35s;\n}\n.manual-item[data-v-5b69e508] {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #fff;\n -webkit-transition: all ease 0.35s;\n transition: all ease 0.35s;\n}\n.page-count[data-v-5b69e508] {\n position: absolute;\n top: 0.8rem;\n left: 50%;\n z-index: 1;\n padding: 0 0.8rem;\n background: rgba(0, 0, 0, 0.8);\n border-radius: 0.5rem;\n font-size: 14px;\n color: #FFFFFF;\n text-align: center;\n line-height: 1.8;\n -webkit-transform: translate(-50%, 0);\n transform: translate(-50%, 0);\n}\n.manual-page[data-v-5b69e508] {\n position: relative;\n width: 100%;\n height: 100%;\n display: -webkit-box;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.manual-page.loading[data-v-5b69e508] {\n /*background: url(/article-h5/static/img/loading.95eeac7.gif) no-repeat center center !important;*/\n /*background-size: 60px !important;*/\n}\n.page-photo[data-v-5b69e508] {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n font-size: 0;\n line-height: 0;\n width: 100%;\n height: 100%;\n opacity: 1;\n -webkit-transition: opacity ease 0.2s;\n transition: opacity ease 0.2s;\n}\n.manual-page.loading .page-photo[data-v-5b69e508] {\n opacity: 0;\n}\n.page-photo[data-v-5b69e508]::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n z-index: 2;\n pointer-events: none;\n background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.2)), color-stop(6%, rgba(255, 255, 255, 0.15)), to(rgba(255, 255, 255, 0.15)));\n background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.15) 6%, rgba(255, 255, 255, 0.1
// exports
/***/ }),
/* 53 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
2020-02-05 11:05:03 +08:00
value: true
2020-02-03 21:34:20 +08:00
});
exports.default = {
2020-02-05 11:05:03 +08:00
props: {
item: Object,
index: Number,
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
},
length: {
type: Number,
default: 0
},
active: { // 翻动效果生效
type: Boolean,
default: false
},
styles: {
type: Array,
default: function _default() {
return [{}, {}, {}, {}, {}, {}];
}
}
},
data: function data() {
return {};
},
mounted: function mounted() {},
computed: {
clipSize: function clipSize() {
return Math.sqrt(Math.pow(this.width, 2) + Math.pow(this.height, 2), 2);
}
}
2020-02-03 21:34:20 +08:00
};
/***/ }),
/* 54 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"div",
{
staticClass: "turn-wraper",
style: {
width: _vm.width + "px",
height: _vm.height + "px",
overflow: _vm.active ? "visible" : "hidden",
zIndex: _vm.length - _vm.index
}
},
[
_c(
"div",
{
staticClass: "turn-page-left",
style: { left: "-" + _vm.width + "px" }
},
[
_c(
"div",
{
staticClass: "turn-page-left-clip",
style: Object.assign(
{},
{ width: _vm.clipSize + "px", height: _vm.clipSize + "px" },
_vm.styles[3]
)
},
[
_c(
"div",
{
staticClass: "turn-page-left-content",
style: Object.assign(
{},
{ width: _vm.width + "px", height: _vm.height + "px" },
_vm.styles[1]
)
},
[
_c("div", { staticClass: "turn-page-left-inner" }, [
_c("div", { staticClass: "manual-item" }, [
_c("div", { staticClass: "page-count" }, [
_vm._v(
_vm._s(_vm.index + 1) + " / " + _vm._s(_vm.length)
)
]),
_vm._v(" "),
2020-02-05 11:05:03 +08:00
_c(
"div",
{ staticClass: "manual-page" },
[
_c("div", { staticClass: "page-photo" }, [
_c("img", {
attrs: { src: _vm.item.picture_image }
})
]),
_vm._v(" "),
_vm._t("default")
],
2
)
2020-02-03 21:34:20 +08:00
])
]),
_vm._v(" "),
_c("div", {
staticClass: "turn-page-left-gradient",
style: Object.assign(
{},
{
top: "-" + _vm.height / 2 + "px",
height: _vm.height * 2 + "px"
},
_vm.styles[4]
)
})
]
)
]
)
]
),
_vm._v(" "),
_c(
"div",
{
staticClass: "turn-page-right",
style: { width: _vm.width + "px", height: _vm.height + "px" }
},
[
_c("div", {
staticClass: "turn-page-right-gradient",
style: Object.assign(
{},
{
top: "-" + _vm.height / 2 + "px",
height: _vm.height * 2 + "px"
},
_vm.styles[5]
)
}),
_vm._v(" "),
_c(
"div",
{
staticClass: "turn-page-right-clip",
style: Object.assign(
{},
{ width: _vm.clipSize + "px", height: _vm.clipSize + "px" },
_vm.styles[2]
)
},
[
_c(
"div",
{
staticClass: "turn-page-right-content",
style: Object.assign(
{},
{ width: _vm.width + "px", height: _vm.height + "px" },
_vm.styles[0]
)
},
[
_c("div", { staticClass: "manual-item" }, [
_c("div", { staticClass: "page-count" }, [
_vm._v(_vm._s(_vm.index + 1) + " / " + _vm._s(_vm.length))
]),
_vm._v(" "),
2020-02-05 11:05:03 +08:00
_c(
"div",
{ staticClass: "manual-page" },
[
_c("div", { staticClass: "page-photo" }, [
_c("img", { attrs: { src: _vm.item.picture_image } })
]),
_vm._v(" "),
_vm._t("default")
],
2
)
2020-02-03 21:34:20 +08:00
])
]
)
]
)
]
)
]
)
}
var staticRenderFns = []
render._withStripped = true
var esExports = { render: render, staticRenderFns: staticRenderFns }
/* harmony default export */ __webpack_exports__["a"] = (esExports);
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-loader/node_modules/vue-hot-reload-api") .rerender("data-v-5b69e508", esExports)
}
}
/***/ }),
/* 55 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"div",
{
ref: "turn",
staticClass: "turn",
style: { width: _vm.width + "px", height: _vm.height + "px" }
},
[
_vm._l(_vm.data, function(item, index) {
return [
index == _vm.backPage || index == _vm.turnPage
? _c("turn-page", {
attrs: {
index: index,
width: _vm.width,
item: item,
height: _vm.height,
length: _vm.data.length,
active: index == _vm.turnPage && _vm.turnActive,
styles:
index === _vm.turnPage ? _vm.styles : _vm.defaultStyles
}
})
: _vm._e()
]
}),
_vm._v(" "),
_c("div", {
staticClass: "turn-right-border",
style: {
width:
(Math.min(_vm.data.length, 10) / _vm.data.length) *
(_vm.data.length - _vm.backPage) +
"px"
}
})
],
2
)
}
var staticRenderFns = []
render._withStripped = true
var esExports = { render: render, staticRenderFns: staticRenderFns }
/* harmony default export */ __webpack_exports__["a"] = (esExports);
if (false) {
module.hot.accept()
if (module.hot.data) {
require("vue-loader/node_modules/vue-hot-reload-api") .rerender("data-v-7ba5bd90", esExports)
}
}
/***/ })
/******/ ]);
});
//# sourceMappingURL=flip.min.js.map