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

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

import { defineComponent as u, openBlock as o, createElementBlock as t, normalizeStyle as c, Fragment as f, renderList as g, unref as k, normalizeClass as n, toDisplayString as r, createCommentVNode as m, createElementVNode as b } from "vue";
import { useHandler as y } from "./hooks.js";
const C = ["onClick"], h = { key: 0 }, _ = ["src"], x = { class: "txt" }, E = /* @__PURE__ */ u({
  name: "MeTabBar",
  __name: "index",
  props: {
    list: {},
    borderColor: { default: "#dcdfe6" },
    background: { default: "#fff" },
    color: { default: "#949494" },
    colorSelected: { default: "#409eff" }
  },
  emits: ["change"],
  setup(l, { emit: a }) {
    const s = a, { onClick: d } = y(s);
    return (S, $) => (o(), t("ul", {
      class: "me-tab-bar",
      style: c(`border-top-color:${l.borderColor};background:${l.background};`)
    }, [
      (o(!0), t(f, null, g(l.list, (e, i) => (o(), t("li", {
        key: i,
        class: n({ selected: e.state }),
        style: c(`color:${e.state ? l.colorSelected : l.color};`),
        onClick: (p) => k(d)(e)
      }, [
        e.icon ? (o(), t("i", {
          key: 0,
          class: n(["iconfont icon", [e.icon, e.dot && "dot"]])
        }, [
          e.badge && !e.dot ? (o(), t("em", h, r(e.badge), 1)) : m("", !0)
        ], 2)) : (o(), t("img", {
          key: 1,
          src: e.state ? e.imgSelected : e.img,
          alt: "图标",
          class: "img"
        }, null, 8, _)),
        b("span", x, r(e.text), 1)
      ], 14, C))), 128))
    ], 4));
  }
});
export {
  E as default
};