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

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

import { defineComponent as h, openBlock as s, createElementBlock as o, normalizeStyle as r, unref as e, normalizeClass as n, createElementVNode as m, Fragment as y, renderList as g } from "vue";
import { name as t } from "./config.js";
import { useHandle as _, useStyle as v } from "./hooks.js";
const S = ["src"], $ = ["src"], b = /* @__PURE__ */ h({
  name: t,
  __name: "index",
  props: {
    url: {},
    openAnimation: { type: Boolean, default: !1 },
    width: { default: "100%" },
    height: { default: "auto" },
    gutter: {},
    lineColor: { default: "#fff" },
    minSize: { default: 100 },
    lineWidth: { default: 1 }
  },
  emits: ["load"],
  setup(l, { emit: u }) {
    const d = u, i = l, { base64Data: f } = _(i, d), { getStyle: a } = v(i);
    return (k, x) => (s(), o("div", {
      class: n(e(t)),
      style: r(e(a))
    }, [
      m("img", {
        src: l.url,
        class: n(`${e(t)}-placeholder`),
        style: r(e(a))
      }, null, 14, S),
      m("canvas", {
        ref: "canvasNode",
        class: n(`${e(t)}-canvas`)
      }, null, 2),
      (s(!0), o(y, null, g(e(f), (c, p) => (s(), o("img", {
        key: p,
        src: c.base64,
        class: n(`${e(t)}-img ${l.openAnimation ? c.animation : ""}`),
        style: r(e(a))
      }, null, 14, $))), 128))
    ], 6));
  }
});
export {
  b as default
};