mine-h5-ui/es/MeUpload/index.vue.js

一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍

import { defineComponent as _, useModel as D, openBlock as l, createElementBlock as a, Fragment as f, renderList as p, unref as t, createElementVNode as s, createBlock as L, createCommentVNode as d, createVNode as v, toDisplayString as g, TransitionGroup as F, withCtx as M, withDirectives as N, vShow as z, mergeModels as y } from "vue";
import k from "../MeIcon/index.vue.js";
import { useHandler as P } from "./hooks.js";
const S = ["data-disabled"], V = ["onClick"], E = ["src"], R = {
  key: 0,
  class: "upload"
}, $ = ["multiple", "disabled"], j = { class: "num" }, G = ["src"], A = /* @__PURE__ */ _({
  name: "MeUpload",
  __name: "index",
  props: /* @__PURE__ */ y({
    preview: { type: Boolean, default: !0 },
    maxCount: { default: 1e3 },
    maxSize: { default: 2 * 1024 * 1024 },
    multiple: { type: Boolean, default: !1 },
    deletable: { type: Boolean, default: !0 },
    disabled: { type: Boolean, default: !1 },
    beforeRead: { type: Function, default: () => !0 },
    afterRead: { type: Function, default: () => !0 },
    beforeDelete: { type: Function, default: () => !0 }
  }, {
    fileList: { default: () => [] },
    fileListModifiers: {}
  }),
  emits: /* @__PURE__ */ y(["change"], ["update:fileList"]),
  setup(i, { emit: h }) {
    const C = h, b = i, n = D(i, "fileList"), { curNum: u, isPreview: x, onDelete: w, closePreview: r, onChange: c, onPreview: B } = P({ props: b, emit: C, listData: n });
    return (H, o) => (l(), a("div", {
      class: "me-upload",
      "data-disabled": i.disabled
    }, [
      (l(!0), a(f, null, p(n.value, (e) => (l(), a("div", {
        key: e.id,
        class: "imgs",
        onClick: (m) => t(B)(e)
      }, [
        s("img", {
          src: e.url,
          class: "img",
          alt: "图片"
        }, null, 8, E),
        i.deletable ? (l(), L(k, {
          key: 0,
          name: "icon-close",
          color: "#dcdee0",
          size: "16px",
          onClick: (m) => t(w)(m, e)
        }, null, 8, ["onClick"])) : d("", !0)
      ], 8, V))), 128)),
      n.value.length < i.maxCount ? (l(), a("div", R, [
        v(k, {
          name: "icon-xiangji",
          color: "#dcdee0",
          size: "20px"
        }),
        s("input", {
          type: "file",
          class: "file",
          multiple: i.multiple,
          disabled: i.disabled,
          onChange: o[0] || (o[0] = //@ts-ignore
          (...e) => t(c) && t(c)(...e))
        }, null, 40, $)
      ])) : d("", !0),
      t(x) ? (l(), a("div", {
        key: 1,
        class: "preview",
        onClick: o[1] || (o[1] = //@ts-ignore
        (...e) => t(r) && t(r)(...e))
      }, [
        s("div", j, g(t(u)) + " / " + g(n.value.length), 1),
        v(F, {
          tag: "ul",
          name: "slider",
          class: "slider"
        }, {
          default: M(() => [
            (l(!0), a(f, null, p(n.value, (e) => N((l(), a("li", {
              key: e.id
            }, [
              s("img", {
                src: e.url,
                alt: "图片"
              }, null, 8, G)
            ])), [
              [z, t(u) === e.id]
            ])), 128))
          ]),
          _: 1
        })
      ])) : d("", !0)
    ], 8, S));
  }
});
export {
  A as default
};