gepic/dist/ui/naiveUi/upload-image/uploadImage.js

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

import { defineComponent as m, ref as f, watch as n, h as t, nextTick as h } from "vue";
import { NUpload as x } from "naive-ui";
const V = m({
  props: {
    modelValue: {
      type: Array,
      default: () => []
    }
  },
  emits: ["update:modelValue"],
  setup(i, { emit: u, attrs: d }) {
    const l = f([]);
    n(l, (e) => {
      u("update:modelValue", e);
    }), n(
      () => i.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 s = ({ file: e, event: a }) => {
      var o;
      console.log("OnFinish called->", e, a);
      const c = a == null ? void 0 : a.target, g = JSON.parse(c.response ?? "{}");
      e.url = (o = g.data) == null ? void 0 : o.url;
    }, p = ({ file: e, event: a }) => {
      console.log("OnError called->", e, a);
    };
    return () => t(
      "div",
      {
        class: "epic-upload-image"
      },
      {
        default: () => [
          t(
            x,
            {
              ...d,
              "list-type": "image-card",
              accept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
              "onUpdate:file-list": r,
              "file-list": l.value,
              onFinish: s,
              onError: p
            },
            {
              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: () => "点击上传" }
                      )
                    ]
                  }
                )
              ]
            }
          )
        ]
      }
    );
  }
});
export {
  V as default
};