zoom.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. exports.ids = [46];
  2. exports.modules = {
  3. /***/ 177:
  4. /***/ (function(module, exports) {
  5. // Exports
  6. module.exports = {
  7. };
  8. /***/ }),
  9. /***/ 198:
  10. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  11. "use strict";
  12. // ESM COMPAT FLAG
  13. __webpack_require__.r(__webpack_exports__);
  14. // CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/Zoom.vue?vue&type=template&id=5b247e95&scoped=true
  15. var render = function render() {
  16. var _vm = this,
  17. _c = _vm._self._c;
  18. return _c('div', {
  19. staticClass: "spec-preview"
  20. }, [_c('el-image', {
  21. staticStyle: {
  22. "width": "100%",
  23. "height": "100%"
  24. },
  25. attrs: {
  26. "src": _vm.imgUrl,
  27. "alt": "",
  28. "fit": "cover"
  29. }
  30. }), _vm._ssrNode(" <div class=\"event\" data-v-5b247e95></div> <div class=\"mask\" data-v-5b247e95></div>")], 2);
  31. };
  32. var staticRenderFns = [];
  33. // CONCATENATED MODULE: ./components/Zoom.vue?vue&type=template&id=5b247e95&scoped=true
  34. // CONCATENATED MODULE: ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/Zoom.vue?vue&type=script&lang=js
  35. /* harmony default export */ var Zoomvue_type_script_lang_js = ({
  36. name: "Zoom",
  37. props: {
  38. imgUrl: String
  39. },
  40. data() {
  41. return {};
  42. },
  43. methods: {
  44. handler(event) {
  45. let mask = this.$refs.mask;
  46. // let bigImg = this.$refs.big;
  47. // 遮罩层可移动的范围:鼠标的当前坐标到该元素的距离(左侧、顶部)减去 遮罩层宽、高的一半(遮罩层始终是一个以鼠标为中心的正方形)
  48. let left = event.offsetX - mask.offsetWidth / 2;
  49. let top = event.offsetY - mask.offsetHeight / 2;
  50. // 约束遮罩层可移动的范围
  51. if (left <= 0) left = 0;
  52. if (left >= mask.offsetWidth) left = mask.offsetWidth;
  53. if (top <= 0) top = 0;
  54. if (top >= mask.offsetHeight) top = mask.offsetHeight;
  55. // 修改元素的left|top属性值
  56. mask.style.left = left + "px";
  57. mask.style.top = top + "px";
  58. // bigImg.style.left = -2 * left + "px";
  59. // bigImg.style.top = -2 * top + "px";
  60. let obj = {};
  61. obj.left = left;
  62. obj.top = top;
  63. obj.bigShow = true;
  64. this.$emit("sendStyle", obj);
  65. },
  66. leave() {
  67. let obj = {};
  68. obj.left = 0;
  69. obj.top = 0;
  70. obj.bigShow = false;
  71. this.$emit("sendStyle", obj);
  72. }
  73. }
  74. });
  75. // CONCATENATED MODULE: ./components/Zoom.vue?vue&type=script&lang=js
  76. /* harmony default export */ var components_Zoomvue_type_script_lang_js = (Zoomvue_type_script_lang_js);
  77. // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
  78. var componentNormalizer = __webpack_require__(2);
  79. // CONCATENATED MODULE: ./components/Zoom.vue
  80. function injectStyles (context) {
  81. var style0 = __webpack_require__(214)
  82. if (style0.__inject__) style0.__inject__(context)
  83. }
  84. /* normalize component */
  85. var component = Object(componentNormalizer["a" /* default */])(
  86. components_Zoomvue_type_script_lang_js,
  87. render,
  88. staticRenderFns,
  89. false,
  90. injectStyles,
  91. "5b247e95",
  92. "626916fe"
  93. )
  94. /* harmony default export */ var Zoom = __webpack_exports__["default"] = (component.exports);
  95. /***/ }),
  96. /***/ 214:
  97. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  98. "use strict";
  99. __webpack_require__.r(__webpack_exports__);
  100. /* harmony import */ var _node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_0_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Zoom_vue_vue_type_style_index_0_id_5b247e95_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(177);
  101. /* harmony import */ var _node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_0_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Zoom_vue_vue_type_style_index_0_id_5b247e95_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_0_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Zoom_vue_vue_type_style_index_0_id_5b247e95_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
  102. /* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_0_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Zoom_vue_vue_type_style_index_0_id_5b247e95_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__) if(["default"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_0_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_sass_loader_dist_cjs_js_ref_7_oneOf_1_2_node_modules_nuxt_components_dist_loader_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Zoom_vue_vue_type_style_index_0_id_5b247e95_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));
  103. /***/ })
  104. };;
  105. //# sourceMappingURL=zoom.js.map