comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
81 lines (80 loc) • 2.16 kB
JavaScript
import { defineComponent, ref, inject, watch, nextTick, onBeforeUnmount, h } from "vue";
import "../../../utils/config.mjs";
import { repairZero } from "../../../utils/tools.mjs";
import "@vueuse/core";
import { TIMEPICKER_PROVIDE } from "./type.mjs";
const list = defineComponent({
name: "list",
props: {
time: Number,
modelValue: String
},
emit: ["update:modelValue"],
setup(props, { emit }) {
const scrollRef = ref(null);
const { show } = inject(TIMEPICKER_PROVIDE);
const itemHandClick = (idx) => {
scrollRef.value.scrollTo({
top: idx * 30,
behavior: "smooth"
});
emit("update:modelValue", repairZero(idx));
};
const ob = ref();
const createObserver = () => {
ob.value = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
emit("update:modelValue", entry.target.innerHTML);
}
});
},
{
root: scrollRef.value,
rootMargin: `-51% 0px -49% 0px`
}
);
Array.from(scrollRef.value.children).forEach((item) => {
ob.value.observe(item);
});
};
watch(
() => show.value,
(val) => {
var _a;
if (val) {
nextTick(() => {
var _a2;
(_a2 = scrollRef.value) == null ? void 0 : _a2.scrollTo({
top: Number(props.modelValue) * 30
});
createObserver();
});
} else {
(_a = ob.value) == null ? void 0 : _a.disconnect();
}
}
);
onBeforeUnmount(() => {
var _a;
return (_a = ob.value) == null ? void 0 : _a.disconnect();
});
return () => {
return h(
"ul",
{ class: "cu-time-picker__list", ref: scrollRef },
Array.from({ length: props.time }).map((v, idx) => {
return h(
"li",
{ class: { active: Number(props.modelValue) === Number(idx) }, onclick: () => itemHandClick(idx) },
repairZero(idx)
);
})
);
};
}
});
export {
list as default
};