@cmstops/pro-compo
Version:
[物料平台文档中心](https://arco.design/docs/material/guide)
179 lines (178 loc) • 6.27 kB
JavaScript
import { defineComponent, computed, openBlock, createElementBlock, createBlock, unref, withCtx, createElementVNode, normalizeClass, createVNode, Transition, withModifiers, createCommentVNode, normalizeStyle } from "vue";
import { Popover, Image } from "@arco-design/web-vue";
import { IconEdit, IconDelete, IconPlus } from "@arco-design/web-vue/es/icon";
import { DEFAULT_BASE_API } from "../../config.js";
const _hoisted_1 = { class: "thumb-card-container-wrap" };
const _hoisted_2 = {
key: 0,
class: "img-v"
};
const _hoisted_3 = {
key: 0,
class: "img-v"
};
const _sfc_main = defineComponent({
...{ name: "thumbCard" },
__name: "card",
props: {
data: {},
previewList: {},
thumbModel: {},
parentRef: {},
idx: {},
along: { type: Boolean },
model: {},
isPopover: { type: Boolean }
},
emits: [
"open",
"remove",
"change",
"changeThumbType",
"fileForShowThumb",
"uploadLocal",
"update:data"
],
setup(__props, { emit: __emit }) {
const waterBg = `${DEFAULT_BASE_API}/static/images/waterBg.png`;
const props = __props;
const emit = __emit;
const classObj = computed(() => {
var _a;
if (!props.model)
return {};
return {
[`model-${props.model}`]: ((_a = props.data) == null ? void 0 : _a.url) && props.model
};
});
const clickMask = () => {
props.along && openDialogMediaSelection();
};
const loaclUpload = () => {
emit("changeThumbType", props.thumbModel, props.idx || 0);
emit("uploadLocal", (file) => {
let { data } = props;
if (!file)
return;
if (!data) {
data = {};
}
data.url = file.url;
emit("fileForShowThumb", data);
});
};
const openDialogMediaSelection = () => {
emit("open", props.thumbModel);
};
const remove = () => {
emit("remove");
};
return (_ctx, _cache) => {
var _a;
return openBlock(), createElementBlock("div", _hoisted_1, [
_ctx.isPopover ? (openBlock(), createBlock(unref(Popover), {
key: 0,
trigger: "hover",
position: "bottom",
"popup-container": props.parentRef
}, {
content: withCtx(() => [
createElementVNode("div", { onClick: openDialogMediaSelection }, "\u7D20\u6750\u5E93\u9009\u62E9"),
createElementVNode("div", { onClick: loaclUpload }, "\u672C\u5730\u4E0A\u4F20")
]),
default: withCtx(() => {
var _a2;
return [
createElementVNode("div", {
class: normalizeClass(["thumb-card-container", classObj.value])
}, [
((_a2 = props.data) == null ? void 0 : _a2.url) ? (openBlock(), createElementBlock("div", _hoisted_2, [
createVNode(unref(Image), {
class: "item",
fit: "cover",
src: props.data.url,
"show-loader": ""
}, null, 8, ["src"]),
createVNode(Transition, { name: "fade" }, {
default: withCtx(() => [
createElementVNode("div", {
class: "mask",
onClick: clickMask
}, [
createElementVNode("span", {
class: "half",
onClick: withModifiers(openDialogMediaSelection, ["stop"])
}, [
createVNode(unref(IconEdit))
]),
_ctx.along ? (openBlock(), createElementBlock("span", {
key: 0,
class: "half",
onClick: withModifiers(remove, ["stop"])
}, [
createVNode(unref(IconDelete))
])) : createCommentVNode("v-if", true)
])
]),
_: 1
})
])) : (openBlock(), createElementBlock("div", {
key: 1,
class: "item add-thumb",
style: normalizeStyle({ backgroundImage: `url(${waterBg})` }),
onClick: openDialogMediaSelection
}, [
createVNode(unref(IconPlus))
], 4))
], 2)
];
}),
_: 1
}, 8, ["popup-container"])) : (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(["thumb-card-container", classObj.value])
}, [
((_a = props.data) == null ? void 0 : _a.url) ? (openBlock(), createElementBlock("div", _hoisted_3, [
createVNode(unref(Image), {
class: "item",
fit: "cover",
src: props.data.url,
"show-loader": ""
}, null, 8, ["src"]),
createVNode(Transition, { name: "fade" }, {
default: withCtx(() => [
createElementVNode("div", {
class: "mask",
onClick: clickMask
}, [
createElementVNode("span", {
class: "half",
onClick: withModifiers(openDialogMediaSelection, ["stop"])
}, [
createVNode(unref(IconEdit))
]),
_ctx.along ? (openBlock(), createElementBlock("span", {
key: 0,
class: "half",
onClick: withModifiers(remove, ["stop"])
}, [
createVNode(unref(IconDelete))
])) : createCommentVNode("v-if", true)
])
]),
_: 1
})
])) : (openBlock(), createElementBlock("div", {
key: 1,
class: "item add-thumb",
style: normalizeStyle({ backgroundImage: `url(${waterBg})` }),
onClick: openDialogMediaSelection
}, [
createVNode(unref(IconPlus))
], 4))
], 2))
]);
};
}
});
export { _sfc_main as default };