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

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

import { defineComponent as c, openBlock as i, createElementBlock as o, normalizeStyle as l, unref as t, Fragment as f, renderList as g, createElementVNode as u, toDisplayString as x } from "vue";
import { useHandler as m } from "./hooks.js";
const z = /* @__PURE__ */ c({
  name: "MeDivider",
  __name: "index",
  props: {
    list: { default: () => [] },
    line: { default: () => ({
      radius: 0,
      color: "#dcdfe6",
      size: 1
    }) },
    text: { default: () => ({
      color: "#494949",
      size: 14
    }) },
    left: {},
    right: {},
    width: {},
    height: {},
    origin: {}
  },
  setup(e) {
    const s = e, { fieldsetList: n, curLine: r } = m(s);
    return (h, $) => (i(), o("div", {
      class: "me-divider",
      style: l(`width:${e.width}px;height:${e.height}px;`)
    }, [
      t(n).length > 0 ? (i(!0), o(f, { key: 0 }, g(t(n), (d, a) => (i(), o("fieldset", {
        key: a,
        class: "fieldset",
        style: l(`transform-origin:center ${e.origin}px;transform:translate(-50%, -50%) rotate(${d.deg}deg);border-top-width:${t(r).size}px;border-top-color:${t(r).color};border-radius: ${t(r).radius}px;`),
        role: "presentation"
      }, [
        u("legend", {
          class: "legend",
          style: l(`margin-left:${e.left}px;margin-right:${e.right}px;color:${e.text.color};font-size:${e.text.size}px`)
        }, x(d.text), 5)
      ], 4))), 128)) : (i(), o("fieldset", {
        key: 1,
        class: "fieldset",
        style: l(`transform-origin:center ${e.origin}px;border-top-width:${t(r).size}px;border-top-color:${t(r).color};border-radius: ${t(r).radius}px;`),
        role: "presentation"
      }, null, 4))
    ], 4));
  }
});
export {
  z as default
};