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

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

import { defineComponent as V, useModel as y, openBlock as a, createElementBlock as o, createElementVNode as n, Fragment as $, renderList as g, unref as l, normalizeStyle as r, normalizeClass as h, toDisplayString as x, renderSlot as M, mergeModels as s } from "vue";
import { useInitSlots as S } from "./hooks.js";
const D = { class: "me-tab" }, X = ["onClick"], L = /* @__PURE__ */ V({
  name: "MeTab",
  __name: "index",
  props: /* @__PURE__ */ s({
    color: { default: "#949494" },
    activeColor: { default: "#494949" },
    lineColor: { default: "#f56c6c" }
  }, {
    modelValue: { default: "" },
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ s(["change"], ["update:modelValue"]),
  setup(e, { emit: i }) {
    const c = i, d = y(e, "modelValue"), { tabsDom: u, tabList: m, transX: f, duration: b, curIndex: C, onClick: k } = S({ emit: c, currentValue: d });
    return (v, z) => (a(), o("div", D, [
      n("div", {
        ref_key: "tabsDom",
        ref: u,
        class: "tabs"
      }, [
        (a(!0), o($, null, g(l(m), (t) => (a(), o("div", {
          key: t.name,
          class: h(["tab-item", { active: e.modelValue === t.name }]),
          style: r(`color:${e.modelValue === t.name ? e.activeColor : e.color};`),
          onClick: (B) => l(k)(t)
        }, x(t.label), 15, X))), 128)),
        n("div", {
          class: "line-bt",
          style: r(`transform:translateX(${l(f) * (l(C) * 2 + 1)}px) translateX(-50%);transition-duration:${l(b)}s;background:${e.lineColor};`)
        }, null, 4)
      ], 512),
      M(v.$slots, "default")
    ]));
  }
});
export {
  L as default
};