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

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

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