scroll-tabs-vue3/scroll-tabs-vue3.js

可滚动的tabs组件，出现滚动时左右显示滑动按钮

import { defineComponent as y, ref as i, onMounted as C, onUnmounted as E, createElementBlock as m, openBlock as p, withDirectives as V, createElementVNode as a, normalizeClass as b, vShow as k, Fragment as S, renderList as B, toDisplayString as T } from "vue";
const W = (t, u) => {
  const n = t.__vccOpts || t;
  for (const [c, l] of u)
    n[c] = l;
  return n;
}, x = { class: "tabs-container" }, M = ["onClick"], N = y({
  name: "scrollTabsVue3"
}), z = /* @__PURE__ */ Object.assign(N, {
  props: {
    tabs: {
      type: Array,
      required: !0,
      default: () => []
    },
    tabName: {
      type: String,
      default: "name"
    },
    tabValue: {
      type: String
      // default: 'value'
    },
    modelValue: {
      type: [Number, String],
      default: 0
    }
  },
  emits: ["update:modelValue"],
  setup(t, { emit: u }) {
    const n = t, c = u, l = i(null), d = i(null), w = i(!1), h = i(!1), v = i(!1), r = () => {
      if (!l.value || !d.value) return;
      const s = l.value.offsetWidth, e = d.value.scrollWidth, o = l.value.scrollLeft;
      v.value = e > s, w.value = o > 0, h.value = Math.abs(o + s - e) > 2;
    }, g = (s) => {
      const e = l.value.offsetWidth * 0.8, o = l.value.scrollLeft + e * s;
      l.value.scrollTo({
        left: o,
        behavior: "smooth"
      }), setTimeout(r, 100);
    }, L = (s) => {
      n.tabValue ? c("update:modelValue", n.tabs[s][n.tabValue]) : c("update:modelValue", s);
    };
    return C(() => {
      window.addEventListener("resize", r), l.value.addEventListener("scroll", r), r();
    }), E(() => {
      var s;
      window.removeEventListener("resize", r), (s = l.value) == null || s.removeEventListener("scroll", r);
    }), (s, e) => (p(), m("div", x, [
      V(a("div", {
        class: b(["scroll-button left", { disabled: !w.value }]),
        onClick: e[0] || (e[0] = (o) => g(-1))
      }, e[2] || (e[2] = [
        a("svg", {
          t: "1742435005435",
          class: "icon",
          viewBox: "0 0 1024 1024",
          version: "1.1",
          xmlns: "http://www.w3.org/2000/svg",
          "p-id": "2452",
          width: "20",
          height: "20"
        }, [
          a("path", {
            d: "M265.3333332 565.33333291l376.6666667 376.6666667c26.6666669 26.6666669 69.99999961 26.6666669 93.33333369 0 26.6666669-26.6666669 26.6666669-69.99999961 0-93.33333281l-330.00000029-330.00000029 330.00000029-329.99999942c26.6666669-26.6666669 26.6666669-66.6666668 0-93.33333369s-69.99999961-26.6666669-93.33333369 0L265.3333332 472.0000001c-13.33333301 13.33333301-20.00000039 29.99999971-19.99999951 46.66666641 0 16.6666667 6.66666651 33.33333339 19.99999951 46.6666664",
            fill: "#666666",
            "p-id": "2453"
          })
        ], -1)
      ]), 2), [
        [k, v.value]
      ]),
      a("div", {
        class: "tabs-wrapper",
        ref_key: "wrapper",
        ref: l
      }, [
        a("div", {
          class: "tabs-content",
          ref_key: "content",
          ref: d
        }, [
          (p(!0), m(S, null, B(t.tabs, (o, f) => (p(), m("div", {
            key: f,
            class: b(["tab-button", { active: t.modelValue === (t.tabValue ? o[t.tabValue] : f) }]),
            onClick: (D) => L(f)
          }, T(o[t.tabName]), 11, M))), 128))
        ], 512)
      ], 512),
      V(a("div", {
        class: b(["scroll-button right", { disabled: !h.value }]),
        onClick: e[1] || (e[1] = (o) => g(1))
      }, e[3] || (e[3] = [
        a("svg", {
          t: "1742432478445",
          class: "icon",
          viewBox: "0 0 1024 1024",
          version: "1.1",
          xmlns: "http://www.w3.org/2000/svg",
          "p-id": "2294",
          width: "20",
          height: "20"
        }, [
          a("path", {
            d: "M758.6666668 458.66666709l-376.6666667-376.6666667c-26.6666669-26.6666669-69.99999961-26.6666669-93.33333369 0-26.6666669 26.6666669-26.6666669 69.99999961 0 93.33333281l330.00000029 330.00000029-330.00000029 329.99999942c-26.6666669 26.6666669-26.6666669 66.6666668 0 93.33333369s69.99999961 26.6666669 93.33333369 0L758.6666668 551.9999999c13.33333301-13.33333301 20.00000039-29.99999971 19.99999951-46.66666641 0-16.6666667-6.66666651-33.33333339-19.99999951-46.6666664",
            fill: "#666666",
            "p-id": "2295"
          })
        ], -1)
      ]), 2), [
        [k, v.value]
      ])
    ]));
  }
}), $ = /* @__PURE__ */ W(z, [["__scopeId", "data-v-5b2329a3"]]), _ = {
  install(t) {
    t.component("scrollTabsVue3", $);
  }
};
export {
  _ as default
};