fast-vue3-ui
Version:
<h1 align="center"> fast-ui </h1>
199 lines (198 loc) • 7.39 kB
JavaScript
import { defineComponent as C, onMounted as I, ref as f, computed as M, watch as P, watchEffect as N, resolveComponent as D, openBlock as w, createElementBlock as S, createVNode as r, unref as h, normalizeClass as T, createSlots as $, withCtx as p, createElementVNode as E, normalizeStyle as K, withDirectives as _, mergeProps as O, vShow as y, toDisplayString as q, createCommentVNode as G } from "vue";
import "./style/index.css";
import J from "vuedraggable";
import { ElMessage as s, ElMessageBox as Q } from "element-plus";
import { Delete as X, Plus as Y } from "@element-plus/icons-vue";
import { uploadProps as Z, uploadEmits as j } from "./types.mjs";
const ee = { class: "uploadImage-container" }, ue = ["onClick"], te = /* @__PURE__ */ E("div", { class: "disabledShadow" }, null, -1), le = { class: "uploading" }, ae = {
key: 0,
class: "limitTxt"
}, oe = C({
name: "fast-upload-image"
}), pe = /* @__PURE__ */ C({
...oe,
props: Z,
emits: j,
setup(V, { emit: d }) {
const e = V;
I(() => {
console.log("\u540C\u6B65\u6570\u636E\u7684\u56DE\u663E", e.modelValue, e.modelValue.length), e.modelValue.length > 0 && (c(), t.value = e.modelValue);
});
const i = f(!1), v = f(!0), g = f(null), t = f([]), A = M(() => e.limit === 1);
P(
() => e.modelValue,
(u, l) => {
!v.value || e.modelValue.length > 0 && (c(), t.value = u);
},
{
immediate: !0,
deep: !0
}
), N(() => {
c(), t.value = e.modelValue;
});
function c(u) {
const l = u || t.value;
g.value && (g.value.uploadFiles = l.map((a, n) => ({
name: "pic" + n,
percentage: 100,
status: "success",
uid: 123
}))), v.value = !1;
}
function x(u) {
return v.value = !1, e.maxSize ? R(u) : e.screenWidth || e.screenHeight || e.maxScreenWidth || e.maxScreenHeight ? U(u) : (i.value = !0, !0);
}
function B(u, l) {
var a;
u.data ? (!e.limit || e.limit > t.value.length) && (t.value.push(u.data.url), d("update:modelValue", t), d("success", t), (a = g.value) == null || a.clearFiles()) : (c(), s({
type: "error",
message: u.msg
})), i.value = !1;
}
function b(u, l) {
s({
type: "error",
message: l.name + " \u4E0A\u4F20\u5931\u8D25"
}), i.value = !1, console.log(u);
}
function H(u) {
Q.confirm("\u786E\u5B9A\u5220\u9664\u8BE5\u56FE\u7247?", "\u63D0\u793A", {
confirmButtonText: "\u786E\u5B9A",
cancelButtonText: "\u53D6\u6D88",
type: "warning"
}).then(() => {
t.value.splice(u, 1), c(), d("update:modelValue", t), d("success", t);
}).catch(() => {
});
}
function W() {
g.value.abort(), c(), s({
type: "warning",
message: `\u56FE\u7247\u8D85\u9650\uFF0C\u6700\u591A\u53EF\u4E0A\u4F20${e.limit}\u5F20\u56FE\u7247`
});
}
function z(u) {
u.target.classList.add("hideShadow");
}
function k(u) {
u.target.classList.remove("hideShadow"), d("update:modelValue", t), d("success", t);
}
function R(u) {
console.log("\u6821\u9A8C\u56FE\u7247\u5360\u7528\u5927\u5C0F", u);
const l = +e.maxSize;
return u.size / 1024 > l ? (s({
type: "error",
message: "\u4E0A\u4F20\u56FE\u7247\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7" + l * 1024
}), !1) : (i.value = !0, !0);
}
function U(u) {
return new Promise((l, a) => {
const n = new FileReader();
n.onload = (F) => {
const m = F.target.result, o = new Image();
o.onload = () => {
e.screenWidth && +o.width != +e.screenWidth ? (a(), s({
type: "error",
message: "\u4E0A\u4F20\u56FE\u7247\u5BBD\u5EA6\u9650\u5236\u53EA\u80FD\u4E3A" + e.screenWidth + "\u50CF\u7D20"
})) : e.screenHeight && +o.height != +e.screenHeight ? (a(), s({
type: "error",
message: "\u4E0A\u4F20\u56FE\u7247\u9AD8\u5EA6\u9650\u5236\u53EA\u80FD\u4E3A" + e.screenHeight + "\u50CF\u7D20"
})) : e.maxScreenWidth && +o.width > +e.maxScreenWidth ? (a(), s({
type: "error",
message: "\u4E0A\u4F20\u56FE\u7247\u5BBD\u5EA6\u4E0D\u80FD\u8D85\u8FC7" + e.maxScreenWidth + "\u50CF\u7D20"
})) : e.maxScreenHeight && +o.height > +e.maxScreenHeight ? (a(), s({
type: "error",
message: "\u4E0A\u4F20\u56FE\u7247\u9AD8\u5EA6\u4E0D\u80FD\u8D85\u8FC7" + e.maxScreenHeight + "\u50CF\u7D20"
})) : (i.value = !0, l(!0));
}, o.src = m;
}, n.readAsDataURL(u);
});
}
const L = (u) => {
console.log("el-upload\u4E0A\u663E\u793A\u7684\u56FE\u7247\u79FB\u9664\u7684file.uid==>" + u);
};
return (u, l) => {
const a = D("el-image"), n = D("el-icon"), F = D("el-upload");
return w(), S("div", ee, [
r(h(J), {
class: T(["vue-draggable", { disabled: e.disabled }]),
modelValue: t.value,
"onUpdate:modelValue": l[0] || (l[0] = (m) => t.value = m),
onStart: z,
onEnd: k,
itemKey: "itemKey"
}, $({
item: p(({ element: m, index: o }) => [
E("div", {
class: "draggable-item",
style: K({ width: u.showWidth + "px", height: u.showHeight + "px" })
}, [
r(a, {
src: m,
"preview-src-list": [m]
}, null, 8, ["src", "preview-src-list"]),
E("div", {
class: "shadow",
onClick: (se) => H(o)
}, [
r(n, null, {
default: p(() => [
r(h(X))
]),
_: 1
})
], 8, ue)
], 4)
]),
footer: p(() => [
_(r(F, O({
ref_key: "uploadRef",
ref: g,
class: "upload-image"
}, u.$attrs, {
style: { width: u.showWidth + "px", height: u.showHeight + "px" },
accept: ".jpg,.jpeg,.png,.gif",
"show-file-list": !1,
multiple: !h(A),
limit: e.limit || 999,
"before-upload": x,
"on-success": B,
"on-exceed": W,
"on-error": b,
"on-remove": L
}), {
default: p(() => [
r(n, { class: "uploadIcon" }, {
default: p(() => [
r(h(Y)),
_(E("span", le, "\u6B63\u5728\u4E0A\u4F20...", 512), [
[y, i.value]
]),
u.isShowLimit && !i.value && u.limit && !h(A) ? (w(), S("span", ae, " \u6700\u591A" + q(u.limit) + "\u5F20 ", 1)) : G("", !0)
]),
_: 1
})
]),
_: 1
}, 16, ["style", "multiple", "limit"]), [
[y, !e.limit || t.value.length < e.limit]
])
]),
_: 2
}, [
e.disabled ? {
name: "header",
fn: p(() => [
te
]),
key: "0"
} : void 0
]), 1032, ["class", "modelValue"])
]);
};
}
});
export {
pe as default
};