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

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

import { defineComponent as g, ref as h, watch as n, h as i, nextTick as x } from "vue";
/* empty css                                     */
import "vuedraggable";
import { getUUID as v } from "../../../utils/src/common/string.js";
import "@vueuse/core";
import "../../../hooks/src/store/index.js";
import { NUpload as U } from "naive-ui";
const O = g({
  emits: ["update:modelValue", "change"],
  props: {
    modelValue: {
      default: "",
      type: String
    }
  },
  setup(s, { attrs: p, emit: r }) {
    const a = h([]);
    let l = "";
    n(
      () => a.value,
      (e) => {
        l = e.filter((t) => t.status === "finished").map((t) => t.url).join(","), r("update:modelValue", l), r("change", l);
      }
    ), n(
      () => s.modelValue,
      (e) => {
        if (l !== e) {
          if (e === "") {
            a.value = [];
            return;
          }
          e !== null && a.value !== null && (a.value = e.split(",").map((t) => ({
            id: v(),
            name: t,
            status: "finished",
            url: t
          })));
        }
      },
      { immediate: !0 }
    );
    function u(e) {
      x(() => {
        a.value = e;
      });
    }
    const d = ({ event: e, file: t }) => {
      var o;
      const m = e == null ? void 0 : e.target, f = JSON.parse(m.response ?? "{}");
      t.url = (o = f.data) == null ? void 0 : o.url;
    }, c = ({ event: e, file: t }) => {
      console.log("OnError called->", t, e);
    };
    return () => i(
      "div",
      {
        class: "epic-upload-image"
      },
      {
        default: () => [
          i(
            U,
            {
              ...p,
              accept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
              onError: c,
              onFinish: d,
              "file-list": a.value,
              "list-type": "image-card",
              "onUpdate:file-list": u
            },
            {
              default: () => [
                i(
                  "div",
                  { style: { "text-align": "center" } },
                  {
                    default: () => [
                      i("span", {
                        class: "icon--epic icon--epic--cloud-upload-outlined text-md mr-2px text-lg"
                      }),
                      i(
                        "div",
                        { class: "ant-upload-text" },
                        { default: () => "点击上传" }
                      )
                    ]
                  }
                )
              ]
            }
          )
        ]
      }
    );
  }
});
export {
  O as default
};