UploaderPreviewItem.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. var __defProp = Object.defineProperty;
  2. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  3. var __getOwnPropNames = Object.getOwnPropertyNames;
  4. var __hasOwnProp = Object.prototype.hasOwnProperty;
  5. var __export = (target, all) => {
  6. for (var name in all)
  7. __defProp(target, name, { get: all[name], enumerable: true });
  8. };
  9. var __copyProps = (to, from, except, desc) => {
  10. if (from && typeof from === "object" || typeof from === "function") {
  11. for (let key of __getOwnPropNames(from))
  12. if (!__hasOwnProp.call(to, key) && key !== except)
  13. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  14. }
  15. return to;
  16. };
  17. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  18. var stdin_exports = {};
  19. __export(stdin_exports, {
  20. default: () => stdin_default
  21. });
  22. module.exports = __toCommonJS(stdin_exports);
  23. var import_vue = require("vue");
  24. var import_vue2 = require("vue");
  25. var import_utils = require("./utils");
  26. var import_utils2 = require("../utils");
  27. var import_icon = require("../icon");
  28. var import_image = require("../image");
  29. var import_loading = require("../loading");
  30. var stdin_default = (0, import_vue2.defineComponent)({
  31. props: {
  32. name: import_utils2.numericProp,
  33. item: (0, import_utils2.makeRequiredProp)(Object),
  34. index: Number,
  35. imageFit: String,
  36. lazyLoad: Boolean,
  37. deletable: Boolean,
  38. previewSize: [Number, String, Array],
  39. beforeDelete: Function
  40. },
  41. emits: ["delete", "preview"],
  42. setup(props, {
  43. emit,
  44. slots
  45. }) {
  46. const renderMask = () => {
  47. const {
  48. status,
  49. message
  50. } = props.item;
  51. if (status === "uploading" || status === "failed") {
  52. const MaskIcon = status === "failed" ? (0, import_vue.createVNode)(import_icon.Icon, {
  53. "name": "close",
  54. "class": (0, import_utils.bem)("mask-icon")
  55. }, null) : (0, import_vue.createVNode)(import_loading.Loading, {
  56. "class": (0, import_utils.bem)("loading")
  57. }, null);
  58. const showMessage = (0, import_utils2.isDef)(message) && message !== "";
  59. return (0, import_vue.createVNode)("div", {
  60. "class": (0, import_utils.bem)("mask")
  61. }, [MaskIcon, showMessage && (0, import_vue.createVNode)("div", {
  62. "class": (0, import_utils.bem)("mask-message")
  63. }, [message])]);
  64. }
  65. };
  66. const onDelete = (event) => {
  67. const {
  68. name,
  69. item,
  70. index,
  71. beforeDelete
  72. } = props;
  73. event.stopPropagation();
  74. (0, import_utils2.callInterceptor)(beforeDelete, {
  75. args: [item, {
  76. name,
  77. index
  78. }],
  79. done: () => emit("delete")
  80. });
  81. };
  82. const onPreview = () => emit("preview");
  83. const renderDeleteIcon = () => {
  84. if (props.deletable && props.item.status !== "uploading") {
  85. const slot = slots["preview-delete"];
  86. return (0, import_vue.createVNode)("div", {
  87. "role": "button",
  88. "class": (0, import_utils.bem)("preview-delete", {
  89. shadow: !slot
  90. }),
  91. "tabindex": 0,
  92. "aria-label": (0, import_utils.t)("delete"),
  93. "onClick": onDelete
  94. }, [slot ? slot() : (0, import_vue.createVNode)(import_icon.Icon, {
  95. "name": "cross",
  96. "class": (0, import_utils.bem)("preview-delete-icon")
  97. }, null)]);
  98. }
  99. };
  100. const renderCover = () => {
  101. if (slots["preview-cover"]) {
  102. const {
  103. index,
  104. item
  105. } = props;
  106. return (0, import_vue.createVNode)("div", {
  107. "class": (0, import_utils.bem)("preview-cover")
  108. }, [slots["preview-cover"]((0, import_utils2.extend)({
  109. index
  110. }, item))]);
  111. }
  112. };
  113. const renderPreview = () => {
  114. const {
  115. item,
  116. lazyLoad,
  117. imageFit,
  118. previewSize
  119. } = props;
  120. if ((0, import_utils.isImageFile)(item)) {
  121. return (0, import_vue.createVNode)(import_image.Image, {
  122. "fit": imageFit,
  123. "src": item.content || item.url,
  124. "class": (0, import_utils.bem)("preview-image"),
  125. "width": Array.isArray(previewSize) ? previewSize[0] : previewSize,
  126. "height": Array.isArray(previewSize) ? previewSize[1] : previewSize,
  127. "lazyLoad": lazyLoad,
  128. "onClick": onPreview
  129. }, {
  130. default: renderCover
  131. });
  132. }
  133. return (0, import_vue.createVNode)("div", {
  134. "class": (0, import_utils.bem)("file"),
  135. "style": (0, import_utils2.getSizeStyle)(props.previewSize)
  136. }, [(0, import_vue.createVNode)(import_icon.Icon, {
  137. "class": (0, import_utils.bem)("file-icon"),
  138. "name": "description"
  139. }, null), (0, import_vue.createVNode)("div", {
  140. "class": [(0, import_utils.bem)("file-name"), "van-ellipsis"]
  141. }, [item.file ? item.file.name : item.url]), renderCover()]);
  142. };
  143. return () => (0, import_vue.createVNode)("div", {
  144. "class": (0, import_utils.bem)("preview")
  145. }, [renderPreview(), renderMask(), renderDeleteIcon()]);
  146. }
  147. });