z-react-ui/es/enlarge-img/index.js

z-react-ui，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from 'react';
import classNames from 'classnames';
import { usePrefixCls } from '@/_hooks';

var EnlargeImg = function EnlargeImg(_ref) {
  var src = _ref.src,
      _ref$alt = _ref.alt,
      alt = _ref$alt === void 0 ? '图片' : _ref$alt,
      onClick = _ref.onClick,
      className = _ref.className,
      warpClassName = _ref.warpClassName;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var prefixCls = usePrefixCls('large-img');

  var handleClick = function handleClick() {
    onClick && onClick();
    setVisible(true);
  };

  var handleClickLarge = function handleClickLarge() {
    setVisible(false);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: warpClassName
  }, /*#__PURE__*/React.createElement("img", {
    className: classNames("".concat(prefixCls, "-img"), className),
    src: src,
    alt: alt,
    onClick: handleClick
  }), /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(prefixCls, "-large-modal"), _defineProperty({}, "".concat(prefixCls, "-hide"), !visible)),
    onClick: handleClickLarge
  }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("img", {
    src: src,
    alt: alt
  }))));
};

export default EnlargeImg;