131 lines
3.8 KiB
JavaScript
131 lines
3.8 KiB
JavaScript
import { defineComponent, createVNode as _createVNode } from "vue";
|
|
import { t, bem, isImageFile } from "./utils.mjs";
|
|
import { isDef, extend, numericProp, getSizeStyle, callInterceptor, makeRequiredProp } from "../utils/index.mjs";
|
|
import { Icon } from "../icon/index.mjs";
|
|
import { Image } from "../image/index.mjs";
|
|
import { Loading } from "../loading/index.mjs";
|
|
var stdin_default = defineComponent({
|
|
props: {
|
|
name: numericProp,
|
|
item: makeRequiredProp(Object),
|
|
index: Number,
|
|
imageFit: String,
|
|
lazyLoad: Boolean,
|
|
deletable: Boolean,
|
|
reupload: Boolean,
|
|
previewSize: [Number, String, Array],
|
|
beforeDelete: Function
|
|
},
|
|
emits: ["delete", "preview", "reupload"],
|
|
setup(props, {
|
|
emit,
|
|
slots
|
|
}) {
|
|
const renderMask = () => {
|
|
const {
|
|
status,
|
|
message
|
|
} = props.item;
|
|
if (status === "uploading" || status === "failed") {
|
|
const MaskIcon = status === "failed" ? _createVNode(Icon, {
|
|
"name": "close",
|
|
"class": bem("mask-icon")
|
|
}, null) : _createVNode(Loading, {
|
|
"class": bem("loading")
|
|
}, null);
|
|
const showMessage = isDef(message) && message !== "";
|
|
return _createVNode("div", {
|
|
"class": bem("mask")
|
|
}, [MaskIcon, showMessage && _createVNode("div", {
|
|
"class": bem("mask-message")
|
|
}, [message])]);
|
|
}
|
|
};
|
|
const onDelete = (event) => {
|
|
const {
|
|
name,
|
|
item,
|
|
index,
|
|
beforeDelete
|
|
} = props;
|
|
event.stopPropagation();
|
|
callInterceptor(beforeDelete, {
|
|
args: [item, {
|
|
name,
|
|
index
|
|
}],
|
|
done: () => emit("delete")
|
|
});
|
|
};
|
|
const onPreview = () => emit("preview");
|
|
const onReupload = () => emit("reupload");
|
|
const renderDeleteIcon = () => {
|
|
if (props.deletable && props.item.status !== "uploading") {
|
|
const slot = slots["preview-delete"];
|
|
return _createVNode("div", {
|
|
"role": "button",
|
|
"class": bem("preview-delete", {
|
|
shadow: !slot
|
|
}),
|
|
"tabindex": 0,
|
|
"aria-label": t("delete"),
|
|
"onClick": onDelete
|
|
}, [slot ? slot() : _createVNode(Icon, {
|
|
"name": "cross",
|
|
"class": bem("preview-delete-icon")
|
|
}, null)]);
|
|
}
|
|
};
|
|
const renderCover = () => {
|
|
if (slots["preview-cover"]) {
|
|
const {
|
|
index,
|
|
item
|
|
} = props;
|
|
return _createVNode("div", {
|
|
"class": bem("preview-cover")
|
|
}, [slots["preview-cover"](extend({
|
|
index
|
|
}, item))]);
|
|
}
|
|
};
|
|
const renderPreview = () => {
|
|
const {
|
|
item,
|
|
lazyLoad,
|
|
imageFit,
|
|
previewSize,
|
|
reupload
|
|
} = props;
|
|
if (isImageFile(item)) {
|
|
return _createVNode(Image, {
|
|
"fit": imageFit,
|
|
"src": item.objectUrl || item.content || item.url,
|
|
"class": bem("preview-image"),
|
|
"width": Array.isArray(previewSize) ? previewSize[0] : previewSize,
|
|
"height": Array.isArray(previewSize) ? previewSize[1] : previewSize,
|
|
"lazyLoad": lazyLoad,
|
|
"onClick": reupload ? onReupload : onPreview
|
|
}, {
|
|
default: renderCover
|
|
});
|
|
}
|
|
return _createVNode("div", {
|
|
"class": bem("file"),
|
|
"style": getSizeStyle(props.previewSize)
|
|
}, [_createVNode(Icon, {
|
|
"class": bem("file-icon"),
|
|
"name": "description"
|
|
}, null), _createVNode("div", {
|
|
"class": [bem("file-name"), "van-ellipsis"]
|
|
}, [item.file ? item.file.name : item.url]), renderCover()]);
|
|
};
|
|
return () => _createVNode("div", {
|
|
"class": bem("preview")
|
|
}, [renderPreview(), renderMask(), renderDeleteIcon()]);
|
|
}
|
|
});
|
|
export {
|
|
stdin_default as default
|
|
};
|