fx-epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
89 lines (88 loc) • 2.3 kB
JavaScript
import { defineComponent as v, ref as U, watch as u, computed as E, h as o } from "vue";
/* empty css */
import "vuedraggable";
import { getFileNameByUrl as S, getUUID as x } from "../../../utils/src/common/string.js";
import "@vueuse/core";
import "../../../hooks/src/store/index.js";
import "../../../utils/src/manager/pluginManager.js";
import { ElUpload as y, ElButton as B, ElMessage as C } from "element-plus";
const N = v({
emits: ["update:modelValue", "change"],
props: {
modelValue: {
default: "",
type: String
}
},
setup(p, { attrs: i, emit: a }) {
const l = U([]);
let r = "";
u(
() => l.value,
(e) => {
console.log("list", e), r = e.filter((t) => t.status === "success").map((t) => t.url).join(","), a("update:modelValue", r), a("change", r);
}
), u(
() => p.modelValue,
(e) => {
if (r !== e) {
if (e === "") {
l.value = [];
return;
}
e !== null && l.value !== null && (l.value = e.split(",").map((t) => ({
id: x(),
name: S(t),
status: "success",
url: t
})));
}
},
{ immediate: !0 }
);
const c = () => {
}, d = () => {
}, m = (e, t, h) => {
l.value = h.map((n) => {
var s;
return {
...n,
url: (s = n.response.data) == null ? void 0 : s.url
};
});
}, f = (e) => {
C.error("上传失败"), console.error(e);
}, g = E(() => ({
...i,
onBeforeUpload: d,
onChange: c,
onError: f,
onSuccess: m,
"file-list": l.value
}));
return () => o("div", null, {
default: () => [
o(y, g.value, {
default: () => [
o(
B,
{},
{
default: () => [
o("span", {
class: "icon--epic icon--epic--cloud-upload-outlined text-lg",
style: { "margin-right": "2px" }
}),
o("span", null, { default: () => "上传文件" })
]
}
)
]
})
]
});
}
});
export {
N as default
};