sci-pro
Version:
115 lines (114 loc) • 4.01 kB
JavaScript
import { defineComponent as W, ref as a, watch as D, nextTick as $, onMounted as X, onUnmounted as x, openBlock as h, createElementBlock as b, createElementVNode as i, normalizeStyle as _, Fragment as z, renderList as S, normalizeClass as E, toDisplayString as N, renderSlot as R, createCommentVNode as V } from "vue";
import "./style/index.css";
const F = { class: "sci-tabs-container" }, M = { class: "tabs-lists" }, U = ["onClick"], j = { class: "tabs-operation" }, q = {
key: 0,
class: "sci-tabs-panel"
}, A = W({ name: "sci-tabs" }), J = /* @__PURE__ */ W({
...A,
props: {
tabsInfo: { default: () => [] },
bgColor: { default: "#f6f6f9" },
highlight: { default: "#409eff" },
height: { default: "32px" },
padding: { default: "0px" }
},
emits: ["tabClick"],
setup(w, { emit: I }) {
const y = w, B = I;
let n = 0;
const p = a(0), g = a(0), r = a([]), c = a(0), u = a(null), s = a(), v = a(0);
let m = null, d = 0;
D(
() => y.tabsInfo,
(e) => {
$(() => {
var t, f;
n = e.findIndex((l) => l.choose), p.value = (t = r.value[n]) == null ? void 0 : t.getBoundingClientRect().width, g.value = (f = r.value[n]) == null ? void 0 : f.offsetLeft, v.value = d * n;
const o = r.value[n];
if (u.value && o) {
const l = u.value, C = l.clientWidth, k = o.offsetLeft, L = o.offsetWidth, O = k - C / 2 + L / 2;
l.scrollTo({ left: O, behavior: "smooth" });
}
});
},
{ immediate: !0, deep: !0 }
);
const T = (e) => {
B("tabClick", e);
};
return X(() => {
var o;
n = y.tabsInfo.findIndex((t) => t.choose);
const e = r.value[n];
p.value = e == null ? void 0 : e.getBoundingClientRect().width, g.value = e == null ? void 0 : e.offsetLeft, $(() => {
if (u.value && e) {
const t = u.value, f = t.clientWidth, l = e.offsetLeft, C = e.offsetWidth, k = l - f / 2 + C / 2;
t.scrollTo({ left: k });
}
}), s.value && (d = (o = s.value) == null ? void 0 : o.getBoundingClientRect().width, v.value = d * n, m = new ResizeObserver(() => {
var t;
c.value = 0, d = (t = s.value) == null ? void 0 : t.getBoundingClientRect().width, v.value = d * n, setTimeout(() => {
c.value = 0.2;
});
}), m.observe(s.value)), setTimeout(() => {
c.value = 0.2;
});
}), x(() => {
s.value && m.unobserve(s.value);
}), (e, o) => (h(), b("div", F, [
i("div", {
class: "tabs",
style: _({
backgroundColor: e.bgColor,
height: e.height,
padding: `0 ${e.padding}`,
"--highlight": e.highlight
})
}, [
i("div", {
class: "tabs-content",
ref_key: "tabsContentRef",
ref: u
}, [
i("div", M, [
(h(!0), b(z, null, S(e.tabsInfo, (t) => (h(), b("div", {
class: E(["tabs-item", { active: t.choose, disabled: t.disabled }]),
key: t.name,
ref_for: !0,
ref_key: "itemRefs",
ref: r,
onClick: (f) => T(t)
}, N(t.name), 11, U))), 128))
]),
i("div", {
class: "tabs-active-bar",
style: _({
width: `${p.value}px`,
transform: `translateX(${g.value}px)`,
transitionDuration: `${c.value}s`
})
}, null, 4)
], 512),
i("div", j, [
R(e.$slots, "operation")
])
], 4),
e.$slots.default ? (h(), b("div", q, [
i("div", {
class: "sci-tabs-panel-content",
ref_key: "panelOuter",
ref: s,
style: _({
transform: `translateX(-${v.value}px)`,
transitionDuration: `${c.value}s`
})
}, [
R(e.$slots, "default")
], 4)
])) : V("", !0)
]));
}
});
export {
J as default
};