index.js 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  4. import { defineComponent, computed } from 'vue';
  5. import ImageInternal from '../vc-image';
  6. import { imageProps } from '../vc-image/src/Image';
  7. import defaultLocale from '../locale/en_US';
  8. import useConfigInject from '../config-provider/hooks/useConfigInject';
  9. import PreviewGroup, { icons } from './PreviewGroup';
  10. import EyeOutlined from "@ant-design/icons-vue/es/icons/EyeOutlined";
  11. import { getTransitionName } from '../_util/transition';
  12. import useStyle from './style';
  13. import classNames from '../_util/classNames';
  14. const Image = defineComponent({
  15. name: 'AImage',
  16. inheritAttrs: false,
  17. props: imageProps(),
  18. setup(props, _ref) {
  19. let {
  20. slots,
  21. attrs
  22. } = _ref;
  23. const {
  24. prefixCls,
  25. rootPrefixCls,
  26. configProvider
  27. } = useConfigInject('image', props);
  28. // Style
  29. const [wrapSSR, hashId] = useStyle(prefixCls);
  30. const mergedPreview = computed(() => {
  31. const {
  32. preview
  33. } = props;
  34. if (preview === false) {
  35. return preview;
  36. }
  37. const _preview = typeof preview === 'object' ? preview : {};
  38. return _extends(_extends({
  39. icons
  40. }, _preview), {
  41. transitionName: getTransitionName(rootPrefixCls.value, 'zoom', _preview.transitionName),
  42. maskTransitionName: getTransitionName(rootPrefixCls.value, 'fade', _preview.maskTransitionName)
  43. });
  44. });
  45. return () => {
  46. var _a, _b;
  47. const imageLocale = ((_b = (_a = configProvider.locale) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.Image) || defaultLocale.Image;
  48. const defaultPreviewMask = () => _createVNode("div", {
  49. "class": `${prefixCls.value}-mask-info`
  50. }, [_createVNode(EyeOutlined, null, null), imageLocale === null || imageLocale === void 0 ? void 0 : imageLocale.preview]);
  51. const {
  52. previewMask = slots.previewMask || defaultPreviewMask
  53. } = props;
  54. return wrapSSR(_createVNode(ImageInternal, _objectSpread(_objectSpread({}, _extends(_extends(_extends({}, attrs), props), {
  55. prefixCls: prefixCls.value
  56. })), {}, {
  57. "preview": mergedPreview.value,
  58. "rootClassName": classNames(props.rootClassName, hashId.value)
  59. }), _extends(_extends({}, slots), {
  60. previewMask: typeof previewMask === 'function' ? previewMask : null
  61. })));
  62. };
  63. }
  64. });
  65. export { imageProps };
  66. Image.PreviewGroup = PreviewGroup;
  67. Image.install = function (app) {
  68. app.component(Image.name, Image);
  69. app.component(Image.PreviewGroup.name, Image.PreviewGroup);
  70. return app;
  71. };
  72. export { PreviewGroup as ImagePreviewGroup };
  73. export default Image;