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

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

import { defineComponent as g, ref as f, watch as i, h as t, nextTick as h } from "vue";
import { NUpload as x } from "naive-ui";
import { u as v } from "./index-B1s67XDZ.js";
const { t: y } = v(), O = g({
  props: {
    modelValue: {
      type: Array,
      default: () => []
    }
  },
  emits: ["update:modelValue"],
  setup(n, { emit: s, attrs: u }) {
    const l = f([]);
    i(l, (e) => {
      s("update:modelValue", e);
    }), i(
      () => n.modelValue,
      (e) => {
        if (e != null && e.length > 0 && l.value != null) {
          if (l.value === e) return;
          l.value.length = 0, l.value.push(...e);
        }
      },
      { deep: !0, immediate: !0 }
    );
    function r(e) {
      console.log("onChange called->", e), h(() => {
        l.value = e;
      });
    }
    const d = ({ file: e, event: a }) => {
      var o;
      console.log("OnFinish called->", e, a);
      const p = a == null ? void 0 : a.target, m = JSON.parse(p.response ?? "{}");
      e.url = (o = m.data) == null ? void 0 : o.url;
    }, c = ({ file: e, event: a }) => {
      console.log("OnError called->", e, a);
    };
    return () => t(
      "div",
      {
        class: "epic-upload-image"
      },
      {
        default: () => [
          t(
            x,
            {
              ...u,
              "list-type": "image-card",
              accept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
              "onUpdate:file-list": r,
              "file-list": l.value,
              onFinish: d,
              onError: c
            },
            {
              default: () => [
                t(
                  "div",
                  { style: { "text-align": "center" } },
                  {
                    default: () => [
                      t("span", {
                        class: "icon--epic icon--epic--cloud-upload-outlined text-md mr-2px text-lg"
                      }),
                      t("div", { class: "ant-upload-text" }, { default: () => y("clickToUpload") })
                    ]
                  }
                )
              ]
            }
          )
        ]
      }
    );
  }
});
export {
  O as default
};