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