@icreate/ics-mui
Version:
京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
183 lines (182 loc) • 7.05 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, toRef, ref, openBlock, createElementBlock, Fragment, renderList, createBlock, unref, createCommentVNode, createElementVNode, toDisplayString, renderSlot, createVNode, normalizeClass } from "vue";
import { r as g, u, C } from "../style_icon-C4_0S-Vm.js";
import { u as useFormDisabled } from "../common-DXugw-he.js";
import { w as withInstall } from "../with-install-DWwOiZS3.js";
const _hoisted_1 = { class: "nut-choose-image" };
const _hoisted_2 = {
key: 0,
class: "nut-choose-image__preview-img"
};
const _hoisted_3 = {
key: 0,
class: "nut-choose-image__preview__progress"
};
const _hoisted_4 = { class: "nut-choose-image__preview__progress__msg" };
const _hoisted_5 = ["onClick"];
const _hoisted_6 = ["src", "onClick"];
const _hoisted_7 = {
key: 3,
class: "nut-choose-image__preview-img__file"
};
const _hoisted_8 = ["onClick"];
const _hoisted_9 = { class: "file__name_tips" };
const _hoisted_10 = { class: "tips" };
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
name: "IcsChooseMedia"
}), {
__name: "index",
props: {
fileList: {
type: Array,
default: () => [
{
name: "文件1.png",
url: "https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif",
status: "success",
message: "上传成功",
type: "image"
},
{
name: "文件2.png",
url: "https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif",
status: "error",
message: "上传失败",
type: "image"
},
{
name: "文件3.png",
url: "https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif",
status: "uploading",
message: "上传中...",
type: "image"
}
]
},
isPreview: { type: Boolean, default: true },
isDeletable: { type: Boolean, default: true },
listType: { type: String, default: "picture" },
multiple: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
maximum: { type: [Number, String], default: 1 }
},
emits: [
"start",
"progress",
"oversize",
"success",
"failure",
"change",
"delete",
"update:fileList",
"fileItemClick",
"uploader"
],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const disabled = useFormDisabled(toRef(props, "disabled"));
const fileList = ref(props.fileList);
const fileItemClick = (fileItem) => {
emits("fileItemClick", { fileItem });
};
const deleted = (file, index) => {
fileList.value.splice(index, 1);
emits("delete", {
file,
fileList: fileList.value,
index
});
};
const onDelete = (file, index) => {
if (disabled.value)
return;
deleted(file, index);
};
const onUploader = () => {
emits("uploader", {});
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
(openBlock(true), createElementBlock(Fragment, null, renderList(fileList.value, (item, index) => {
var _a;
return openBlock(), createElementBlock("div", {
key: item.uid,
class: "nut-choose-image__preview"
}, [
__props.listType == "picture" && !_ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2, [
item.status != "success" ? (openBlock(), createElementBlock("div", _hoisted_3, [
item.status != "ready" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
item.status == "error" ? (openBlock(), createBlock(unref(g), {
key: 0,
color: "#fff"
})) : (openBlock(), createBlock(unref(u), {
key: 1,
name: "loading",
color: "#fff"
}))
], 64)) : createCommentVNode("", true),
createElementVNode("div", _hoisted_4, toDisplayString(item.message), 1)
])) : createCommentVNode("", true),
__props.isDeletable ? (openBlock(), createElementBlock("div", {
key: 1,
class: "close",
onClick: ($event) => onDelete(item, index)
}, [
renderSlot(_ctx.$slots, "delete-icon", {}, () => [
createVNode(unref(g))
])
], 8, _hoisted_5)) : createCommentVNode("", true),
((_a = item == null ? void 0 : item.type) == null ? void 0 : _a.includes("image")) && item.url ? (openBlock(), createElementBlock("img", {
key: 2,
class: "nut-choose-image__preview-img__c",
src: item.url,
onClick: ($event) => fileItemClick(item)
}, null, 8, _hoisted_6)) : (openBlock(), createElementBlock("div", _hoisted_7, [
createElementVNode("div", {
class: "nut-choose-image__preview-img__file__name",
onClick: ($event) => fileItemClick(item)
}, [
createElementVNode("div", _hoisted_9, toDisplayString(item.name), 1)
], 8, _hoisted_8)
])),
createElementVNode("div", _hoisted_10, toDisplayString(item.name), 1)
])) : createCommentVNode("", true)
]);
}), 128)),
__props.listType == "picture" && !_ctx.$slots.default && Number(__props.maximum) - fileList.value.length ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(["nut-choose-image__upload", [__props.listType]]),
onClick: onUploader
}, [
renderSlot(_ctx.$slots, "upload-icon", {}, () => [
createVNode(unref(C), { color: "#808080" })
])
], 2)) : createCommentVNode("", true)
]);
};
}
}));
withInstall(_sfc_main);
export {
_sfc_main as ChooseMedia,
_sfc_main as default
};