epic-designer/dist/ui/elementPlus/upload-image/uploadImage.js

基于vue3的设计器,可视化开发页面表单

import { defineComponent as w, ref as o, watch as c, computed as C, h as a } from "vue";
/* empty css                                     */
import "vuedraggable";
import { getUUID as S } from "../../../utils/src/common/string.js";
import "@vueuse/core";
import "../../../hooks/src/store/index.js";
import { ElUpload as j, ElImageViewer as y, ElMessage as I } from "element-plus";
const k = w({
  emits: ["update:modelValue"],
  props: {
    modelValue: {
      default: "",
      type: String
    }
  },
  setup(d, { attrs: m, emit: f }) {
    const r = o([]);
    let l = "";
    const s = o(""), u = o(!1), i = (e) => {
      u.value = e;
    };
    c(
      () => r.value,
      (e) => {
        l = e.filter((t) => t.status === "success").map((t) => t.url).join(","), f("update:modelValue", l);
      }
    ), c(
      () => d.modelValue,
      (e) => {
        if (l !== e) {
          if (e === "") {
            r.value = [];
            return;
          }
          e && r.value && (r.value = e.split(",").map((t) => ({
            name: t,
            status: "success",
            uid: Number(S(10, "number")),
            url: t
          })));
        }
      },
      { deep: !0, immediate: !0 }
    );
    const g = () => {
    }, v = (e) => {
      e.url && (s.value = e.url, i(!0));
    }, h = (e, t, E) => {
      r.value = E.map((n) => {
        var p;
        return {
          ...n,
          url: (p = n.response.data) == null ? void 0 : p.url
        };
      });
    }, U = (e) => {
      I.error("上传失败"), console.error(e);
    }, b = () => {
    }, x = C(() => ({
      ...m,
      accept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
      onBeforeUpload: b,
      onChange: g,
      onError: U,
      onPreview: v,
      onSuccess: h,
      "file-list": r.value,
      "list-type": "picture-card"
    }));
    return () => a(
      "div",
      {
        class: "epic-upload-image"
      },
      {
        default: () => [
          a(j, x.value, {
            default: () => [
              a(
                "div",
                { style: { "text-align": "center" } },
                {
                  default: () => [
                    a("span", {
                      class: "icon--epic icon--epic--cloud-upload-outlined mr-2px text-lg"
                    }),
                    a(
                      "div",
                      { class: "ant-upload-text" },
                      { default: () => "点击上传" }
                    )
                  ]
                }
              )
            ]
          }),
          (() => {
            if (u.value)
              return a(y, {
                onClose: () => {
                  i(!1);
                },
                urlList: [s.value]
              });
          })()
        ]
      }
    );
  }
});
export {
  k as default
};