uv-ui
Version:
基于vue3的移动端组件库
57 lines (56 loc) • 1.66 kB
JavaScript
import { ref as d, reactive as f, onMounted as _, openBlock as k, createElementBlock as y, createElementVNode as s, renderSlot as p, normalizeStyle as o, unref as t, createTextVNode as A, toDisplayString as C } from "vue";
import { useParent as S } from "../../hooks/useContext.js";
import "../../hooks/useCountDown.js";
import "./steps-item.vue_vue_type_style_index_0_lang.js";
const b = { class: "uv-steps-item-icon" }, g = {
name: "UvStepsItem"
}, B = /* @__PURE__ */ Object.assign(g, {
props: {
title: {
type: String
}
},
setup(u) {
const c = d(null), e = f({
$el: c,
isActive: !1,
lineActive: !1
}), { props: i, acitveItemUpdate: v, index: n } = S("steps", e);
_(() => {
i.modelValue === n.value && (e.isActive = !0);
});
const { activeColor: l, inactiveColor: r } = i, m = () => {
i.isAbleClick && v(n.value);
};
return (a, x) => (k(), y("div", {
class: "uv-steps-item",
onClick: m,
ref_key: "itemRef",
ref: c
}, [
s("div", b, [
p(a.$slots, "icon", {}, () => [
s("div", {
class: "uv-steps-item-icon-default",
style: o({ borderColor: e.isActive ? t(l) : t(r) })
}, null, 4)
])
]),
s("div", {
class: "uv-steps-item-text",
style: o({ color: e.isActive ? t(l) : t(r) })
}, [
p(a.$slots, "default", {}, () => [
A(C(u.title), 1)
])
], 4),
s("div", {
class: "uv-steps-item-line",
style: o({ backgroundColor: e.lineActive ? t(l) : "" })
}, null, 4)
], 512));
}
});
export {
B as default
};