uv-ui/es/components/tab/tab.js

基于vue3的移动端组件库

import { ref as s, watch as h, onMounted as S, nextTick as L, openBlock as u, createElementBlock as v, createElementVNode as f, normalizeClass as g, normalizeStyle as d, Fragment as x, renderList as I, toDisplayString as w } from "vue";
import { scrollLeftTo as B } from "../../utils/common.js";
import "./tab.vue_vue_type_style_index_0_lang.js";
const R = { class: "uv-tab-wrap" }, A = ["onClick"], D = {
  name: "UvTab"
}, z = /* @__PURE__ */ Object.assign(D, {
  props: {
    acitveIndex: {
      type: Number,
      default: 0
    },
    bgColor: {
      type: String
    },
    color: {
      type: String
    },
    activeColor: {
      type: String
    },
    scroll: {
      type: Boolean,
      default: !1
    },
    lineHeight: {
      type: String
    },
    lineColor: {
      type: String
    },
    list: {
      type: Array
    },
    shrink: {
      type: Boolean,
      default: !1
    },
    placeholder: {
      type: String,
      default: ""
    }
  },
  emits: ["change"],
  setup(e, { emit: k }) {
    const b = e, r = s(null), i = s(null), c = s(null), o = s(0);
    h(() => b.acitveIndex, (t) => {
      o.value = t;
    }, {
      immediate: !0
    }), h(o, (t) => {
      c.value = r.value.querySelectorAll(".uv-tab-item");
      const { offsetWidth: l, offsetLeft: a } = c.value[t];
      if (y(l, a), b.scroll) {
        const n = r.value, m = a - (n.offsetWidth - l) / 2;
        B(n, m);
      }
    });
    const C = (t) => {
      k("change", t), o.value = t;
    };
    S(async () => {
      await L(), T();
    });
    const T = () => {
      c.value = r.value.querySelectorAll(".uv-tab-item");
      const { offsetWidth: t, offsetLeft: l } = c.value[o.value];
      setTimeout(() => {
        i.value.style.transition = "transform 0.3s";
      }, 300), y(t, l);
    }, y = (t, l) => {
      i.value.style.width = `${t}px`, i.value.style.transform = `translateX(${l}px)`;
    };
    return (t, l) => (u(), v("div", R, [
      f("div", {
        class: g(["uv-tab", [e.scroll ? "uv-tab-scroll" : "", e.shrink ? "uv-tab-shrink" : ""]]),
        style: d({ backgroundColor: e.bgColor }),
        ref_key: "uvTabRef",
        ref: r
      }, [
        f("div", {
          ref_key: "uvTabLineRef",
          ref: i,
          class: "uv-tab-line",
          style: d({ height: e.lineHeight, backgroundColor: e.lineColor })
        }, null, 4),
        (u(!0), v(x, null, I(e.list, (a, n) => (u(), v("div", {
          class: g(["uv-tab-item", e.placeholder ? e.placeholder === a ? "" : "uv-tab-acitve-item" : o.value === n ? "uv-tab-acitve-item" : ""]),
          onClick: (m) => C(n),
          style: d({ color: e.placeholder ? e.placeholder === a ? e.color : e.activeColor : o.value === n ? e.activeColor : e.color }),
          key: a
        }, [
          f("div", null, w(a), 1)
        ], 14, A))), 128))
      ], 6)
    ]));
  }
});
export {
  z as default
};