UNPKG

image-magnifier-react

Version:

React图片放大镜组件,鼠标经过会显示放大镜

1 lines 2.96 kB
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var r="object"==typeof exports?t(require("react")):t(e.React);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(self,(function(e){return(()=>{"use strict";var t={787:t=>{t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{o.d(n,{default:()=>i});var e=o(787),t=o.n(e);function r(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var o,n,a=[],i=!0,l=!1;try{for(r=r.call(e);!(i=(o=r.next()).done)&&(a.push(o.value),!t||a.length!==t);i=!0);}catch(e){l=!0,n=e}finally{try{i||null==r.return||r.return()}finally{if(l)throw n}}return a}}(e,t)||function(e,t){if(e){if("string"==typeof e)return a(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r<t;r++)o[r]=e[r];return o}const i=function(o){var n=o.image,a=o.width,i=void 0===a?"100%":a,l=o.zoom,u=void 0===l?2:l,s=o.magnifierWidth,c=void 0===s?100:s,f=o.magnifierHeight,d=void 0===f?100:f,p=o.borderWidth,v=void 0===p?2:p,m=o.borderColor,y=void 0===m?"white":m,b=r((0,e.useState)(0),2),h=b[0],g=b[1],w=r((0,e.useState)(0),2),x=w[0],j=w[1],S=r((0,e.useState)(1),2),O=S[0],E=S[1],W=r((0,e.useState)(!1),2),A=W[0],M=W[1],N=r((0,e.useState)(!1),2),k=N[0],q=N[1],C=r((0,e.useState)(!1),2),D=C[0],I=C[1],P=(0,e.useRef)();return t().createElement("div",{style:{width:i},className:"oyDyJcKo2zxqjrJB2HbW",onMouseOut:function(){M(!1)},onMouseOver:function(){!A&&M(!0)}},t().createElement("img",{src:n,className:"N80Lckjd45B2LbFckgXr",ref:P,onMouseMove:function(e){var t=window.event,r=t.offsetX,o=t.offsetY,n=r,a=P.current,i=a.width,l=a.naturalWidth;E(u*i/l);var s=o-d/2-v;g(n-c/2-v),j(s);var f=d/2+v-u*o;q(c/2+v-u*n),I(f)}}),t().createElement("div",{className:"hmQD9g6c6pbWUsVKWPll",style:{display:A?"block":"none",left:h,top:x,width:c,height:d,borderWidth:v,borderColor:y}},t().createElement("img",{src:n,className:"E6js6xlQmD4wikYREQ5T",style:{left:k,top:D,transform:"scale(".concat(O,")"),transformOrigin:"left top"}})))}})(),n.default})()}));