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

基于Epic-Designer-Pro版本的设计器,可视化开发页面表单

import { defineComponent as E, ref as i, watch as m, computed as w, h as o } from "vue";
/* empty css                                     */
import "radix-vue";
import "clsx";
import "tailwind-merge";
import "lucide-vue-next";
import "../../../ui-kit/base-ui/src/shadch-ui/button/index.js";
import "@vueuse/core";
import "../../../ui-kit/base-ui/src/shadch-ui/toast/index.js";
import "vuedraggable";
import { getUUID as S } from "../../../utils/src/common/string.js";
import "../../../hooks/src/store/index.js";
import "lodash";
import "../../../utils/src/manager/pluginManager.js";
import "monaco-editor";
import "../../../utils/src/request/index.js";
import { ElUpload as j, ElImageViewer as y, ElMessage as I } from "element-plus";
const J = E({
  emits: ["update:modelValue", "change"],
  props: {
    modelValue: {
      default: "",
      type: String
    }
  },
  setup(c, { attrs: d, emit: l }) {
    const r = i([]);
    let a = "";
    const s = i(""), u = i(!1), p = (e) => {
      u.value = e;
    };
    m(
      () => r.value,
      (e) => {
        a = e.filter((t) => t.status === "success").map((t) => t.url).join(","), l("update:modelValue", a), l("change", a);
      }
    ), m(
      () => c.modelValue,
      (e) => {
        if (a !== 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 f = (e, t) => {
      r.value = t;
    }, g = (e) => {
      e.url && (s.value = e.url, p(!0));
    }, v = (e, t, x) => {
      r.value = x.map((n) => ({
        ...n,
        url: n.response.data.url
      }));
    }, h = (e) => {
      I.error("上传失败"), console.error(e);
    }, U = () => {
    }, b = w(() => ({
      ...d,
      accept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
      onBeforeUpload: U,
      onError: h,
      onPreview: g,
      onRemove: f,
      onSuccess: v,
      "file-list": r.value,
      "list-type": "picture-card"
    }));
    return () => o(
      "div",
      {
        class: "epic-upload-image"
      },
      {
        default: () => [
          o(j, b.value, {
            default: () => [
              o(
                "div",
                { style: { "text-align": "center" } },
                {
                  default: () => [
                    o("span", {
                      class: "icon--epic icon--epic--cloud-upload-outlined mr-2px text-lg"
                    }),
                    o(
                      "div",
                      { class: "ant-upload-text" },
                      { default: () => "点击上传" }
                    )
                  ]
                }
              )
            ]
          }),
          (() => {
            if (u.value)
              return o(y, {
                onClose: () => {
                  p(!1);
                },
                urlList: [s.value]
              });
          })()
        ]
      }
    );
  }
});
export {
  J as default
};