uv-ui
Version:
基于vue3的移动端组件库
204 lines (203 loc) • 6.31 kB
JavaScript
import { ref as z, openBlock as d, createElementBlock as i, createElementVNode as n, Fragment as R, renderList as $, toDisplayString as F, createCommentVNode as f, createVNode as y, unref as k, renderSlot as V, withDirectives as x, vShow as D, reactive as L } from "vue";
import w from "../icon/index.js";
import { readFileContent as S, isOversize as E, filterFiles as O, toArray as T } from "./utils.js";
import { isPromise as j } from "../../utils/type.js";
import "./uploader.vue_vue_type_style_index_0_lang.js";
const q = { class: "uv-uploader" }, G = { class: "uv-uploader-wrapper" }, H = ["onClick", "src"], J = {
key: 0,
class: "uv-uploader-mask"
}, K = {
key: 0,
class: "uv-uploader-uploading-wrapper"
}, M = /* @__PURE__ */ n("div", { class: "uv-uploader-uploading" }, null, -1), Q = {
key: 1,
class: "uv-uploader-failed-wrapper"
}, W = ["onClick"], X = /* @__PURE__ */ n("div", { class: "uv-uploader-delete-shadow" }, null, -1), Y = { class: "uv-uploader-upload" }, Z = ["disabled"], ee = {
name: "UvUploader"
}, re = /* @__PURE__ */ Object.assign(ee, {
props: {
disabled: {
type: Boolean,
default: !1
},
deletable: {
type: Boolean,
default: !0
},
maxCount: {
type: [Number, String, Function],
default: 1 / 0
},
maxSize: {
type: Number,
default: 1 / 0
},
beforeRead: {
type: Function
},
afterRead: {
type: Function
},
modelValue: {
type: Array,
default: () => []
},
resultType: {
type: String,
default: "dataUrl"
},
previewImage: {
type: Boolean,
default: !0
}
},
emits: ["oversize", "clickUpload", "clickPreview", "delete", "update:modelValue"],
setup(s, { emit: u }) {
const t = s, A = (e) => u("clickUpload", e), I = (e) => u("clickPreview", e), v = z(), g = z(-1), h = () => {
v.value && (v.value.value = "");
}, p = (e = t.modelValue.length) => ({
name: t.name,
index: e
}), b = (e) => {
if (h(), E(e, t.maxSize))
if (Array.isArray(e)) {
const a = O(e, t.maxSize);
if (e = a.valid, u("oversize", a.invalid, p()), !e.length)
return;
} else {
u("oversize", e, p());
return;
}
if (e = L(e), g.value > -1) {
const a = [...t.modelValue];
a.splice(g.value, 1, e), u("update:modelValue", a), g.value = -1;
} else
u("update:modelValue", [...t.modelValue, ...T(e)]);
t.afterRead && t.afterRead(e, p());
}, m = (e) => {
const { maxCount: a, modelValue: l, resultType: r } = t;
if (Array.isArray(e)) {
const o = +a - l.length;
console.log(o), e.length > o && (e = e.slice(0, o)), Promise.all(
e.map((c) => S(c, r))
).then((c) => {
const N = e.map((P, C) => {
const _ = {
file: P,
status: "",
message: ""
};
return c[C] && (_.content = c[C]), _;
});
b(N);
});
} else
S(e, r).then((o) => {
const c = {
file: e,
status: "",
message: ""
};
o && (c.content = o), b(c);
});
}, U = (e) => {
const { files: a } = e.target;
if (t.disabled || !a || !a.length)
return;
const l = a.length === 1 ? a[0] : [].slice.call(a);
if (t.beforeRead) {
const r = t.beforeRead(l, p());
if (!r) {
h();
return;
}
if (j(r)) {
r.then((o) => {
m(o || l);
}).catch(h);
return;
}
}
m(l);
}, B = (e, a) => {
const l = t.modelValue.slice(0);
l.splice(a, 1), u("update:modelValue", l), u("delete", e, p(a));
};
return (e, a) => (d(), i("div", q, [
n("div", G, [
(d(!0), i(R, null, $(s.modelValue, (l, r) => (d(), i(R, null, [
s.modelValue && s.previewImage ? (d(), i("div", {
class: "uv-uploader-img-wrapper",
key: r
}, [
n("img", {
onClick: (o) => I(l),
src: l.content || l.url,
class: "uv-uploader-img"
}, null, 8, H),
l.status === "uploading" || l.status === "failed" ? (d(), i("div", J, [
l.status === "uploading" ? (d(), i("div", K, [
M,
n("div", null, F(l.message || "\u4E0A\u4F20\u4E2D..."), 1)
])) : f("", !0),
l.status === "failed" ? (d(), i("div", Q, [
y(k(w), {
size: "22",
name: "close",
color: "#fff"
}),
n("div", null, F(l.message || "\u4E0A\u4F20\u5931\u8D25"), 1)
])) : f("", !0)
])) : f("", !0),
l.status !== "uploading" && s.deletable ? (d(), i("div", {
key: 1,
onClick: (o) => B(l, r),
class: "uv-uploader-delete"
}, [
V(e.$slots, "preview-delete", {}, () => [
X,
y(k(w), {
class: "uv-uploader-delete-icon",
size: "14",
name: "close",
color: "#fff"
})
])
], 8, W)) : f("", !0),
V(e.$slots, "preview-cover", {
item: l,
file: l.file
})
])) : f("", !0)
], 64))), 256)),
x(n("div", {
class: "uv-uploader-upload-wrapper",
onClick: A
}, [
V(e.$slots, "default", {}, () => [
n("div", Y, [
y(k(w), {
size: "26",
name: "photograph",
color: s.disabled ? "#edeeef" : "#dcdee0"
}, null, 8, ["color"])
])
]),
n("input", {
ref_key: "inputRef",
ref: v,
class: "uv-uploader-input",
type: "file",
disabled: s.disabled,
onChange: U
}, null, 40, Z)
], 512), [
[D, !(s.modelValue.length >= +s.maxCount)]
])
])
]));
}
});
export {
re as default
};