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

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

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