st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
65 lines (64 loc) • 2.51 kB
JavaScript
import { defineComponent as p, inject as S, openBlock as y, createBlock as _, unref as t, withCtx as g, createElementVNode as i, normalizeClass as m, normalizeStyle as l, toDisplayString as d, renderSlot as v } from "vue";
import z from "../StSwiperSlide/StSwiperSlide.vue.js";
import * as n from "../../node_modules/.pnpm/st-common-ui-utils@0.1.1/node_modules/st-common-ui-utils/es/utils/el-size-util.js";
const L = /* @__PURE__ */ p({
name: "StTimelineItem1",
__name: "StTimelineItem1",
props: {
idx: {},
bgImgSrc: { default: "" },
title: { default: "" },
desc: { default: "" },
color: { default: "#efefef" },
animationSpeed: { default: 500 },
titleEnterDelay: { default: 1500 },
descEnterDelay: { default: 1700 },
titleMaxLine: { default: 1 },
descMaxLine: { default: 5 }
},
setup(D) {
const o = S("isReact");
return (e, E) => (y(), _(t(z), null, {
default: g(({ isInitial: a, initialSlideIdx: c, isSlideChange: f, enterSlideIdx: s, leaveSlideIdx: r, currentSlideIdx: u }) => [
i("div", {
class: m(["st-timeline-item1", [t(o) ? "st-timeline-item1--small-screen" : ""]]),
style: l({ backgroundImage: `url(${e.bgImgSrc})` })
}, [
i("div", {
class: m(["st-timeline-item1__content", [
a && c === e.idx ? "st-timeline-item1__content--initial" : "",
r === e.idx ? "st-timeline-item1__content--leave" : "",
s === e.idx ? "st-timeline-item1__content--enter" : ""
]]),
style: l({
"--animation-speed": t(n).elSizePreHandler(e.animationSpeed, "ms"),
"--title-enter-delay": t(n).elSizePreHandler(e.titleEnterDelay, "ms"),
"--desc-enter-delay": t(n).elSizePreHandler(e.descEnterDelay, "ms"),
color: e.color
})
}, [
i("div", {
class: "st-timeline-item1__content__title",
style: l({ "--title-max-line": e.titleMaxLine })
}, d(e.title), 5),
i("div", {
class: "st-timeline-item1__content__desc",
style: l({ "--desc-max-line": e.descMaxLine })
}, d(e.desc), 5),
v(e.$slots, "suffix", {
isInitial: a,
isChange: f,
enterIdx: s,
leaveIdx: r,
currentIdx: u
}, void 0, !0)
], 6)
], 6)
]),
_: 3
}));
}
});
export {
L as default
};