comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
81 lines (80 loc) • 2.26 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../../../utils/config.js");
const tools = require("../../../utils/tools.js");
require("@vueuse/core");
const type = require("./type.js");
const list = vue.defineComponent({
name: "list",
props: {
time: Number,
modelValue: String
},
emit: ["update:modelValue"],
setup(props, { emit }) {
const scrollRef = vue.ref(null);
const { show } = vue.inject(type.TIMEPICKER_PROVIDE);
const itemHandClick = (idx) => {
scrollRef.value.scrollTo({
top: idx * 30,
behavior: "smooth"
});
emit("update:modelValue", tools.repairZero(idx));
};
const ob = vue.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);
});
};
vue.watch(
() => show.value,
(val) => {
var _a;
if (val) {
vue.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();
}
}
);
vue.onBeforeUnmount(() => {
var _a;
return (_a = ob.value) == null ? void 0 : _a.disconnect();
});
return () => {
return vue.h(
"ul",
{ class: "cu-time-picker__list", ref: scrollRef },
Array.from({ length: props.time }).map((v, idx) => {
return vue.h(
"li",
{ class: { active: Number(props.modelValue) === Number(idx) }, onclick: () => itemHandClick(idx) },
tools.repairZero(idx)
);
})
);
};
}
});
exports.default = list;