epic-designer-gold/dist/uploadImage-DQmVV0jl.js

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

import { defineComponent as F, ref as t, inject as L, watch as m, computed as j, h as o, nextTick as I } from "vue";
import { ElImage as P, ElUpload as k, ElImageViewer as S, ElMessage as u } from "element-plus";
import { u as T } from "./index-B1s67XDZ.js";
const { t: i } = T(), N = F({
  props: {
    modelValue: {
      type: Array,
      default: () => []
    }
  },
  emits: ["update:modelValue"],
  setup(h, { emit: x, attrs: n }) {
    const a = t([]), E = L("disabled", { value: !1 }), d = t(""), c = t(!1), p = (e) => {
      c.value = e;
    };
    m(a, (e) => {
      x("update:modelValue", e);
    }), m(
      () => h.modelValue,
      (e) => {
        if (e != null && e.length > 0 && a.value != null) {
          if (a.value === e) return;
          a.value.length = 0, a.value.push(...e);
        }
      },
      { deep: !0, immediate: !0 }
    );
    const b = (e, r) => {
      I(() => {
        s ? (a.value = r.filter((l) => {
          var g, v;
          return ((g = l == null ? void 0 : l.response) == null ? void 0 : g.code) === 200 || ((v = l == null ? void 0 : l.response) == null ? void 0 : v.code) === 201;
        }), s = !1) : a.value = r;
      });
    };
    let s = !1;
    const w = (e, r, l) => {
      e.code !== 200 && (u.error(i("uploadFailed")), s = !0), console.log(l);
    }, U = (e, r, l) => {
      u.error(i("uploadFailed")), console.error(e);
    }, V = (e, r) => {
      let { limit: l } = n;
      u.warning(`最多只能上传 ${l} 张图片`);
    }, y = (e) => {
    }, f = j(() => ({
      ...n,
      "file-list": a.value,
      "list-type": "picture-card",
      accept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
      onBeforeUpload: y,
      onChange: b,
      onSuccess: w,
      onError: U,
      onPreview: C,
      onExceed: V
    })), C = (e) => {
      e.url && (d.value = e.url, p(!0));
    };
    return () => o(
      "div",
      {
        class: "epic-upload-image"
      },
      f.value.disabled || E.value ? {
        default: () => [
          a.value.map(
            (e) => o(P, {
              src: a.value[0].url,
              fit: "contain",
              "preview-src-list": [e.url],
              style: {
                width: "156px",
                margin: "0 8px 8px 0",
                height: "156px",
                border: "1px solid #eee",
                "border-radius": "6px"
              }
            })
          )
        ]
      } : {
        default: () => [
          o(
            k,
            {
              ...f.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: () => i("clickToUpload") })
                    ]
                  }
                )
              ]
            }
          ),
          (() => {
            if (c.value)
              return o(S, {
                urlList: [d.value],
                onClose: () => {
                  p(!1);
                }
              });
          })()
        ]
      }
    );
  }
});
export {
  N as default
};