birdpaper-ui
Version:
一个通用的 vue3 UI组件库。A common vue3 UI component library.
99 lines (98 loc) • 3.51 kB
JavaScript
import { defineComponent, ref, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, unref, createBlock, withCtx, toDisplayString } from "vue";
import { generateArray } from "../../../utils/util.js";
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import dayjs from "dayjs";
const _hoisted_1 = ["onClick"];
const name = "bp-date-time-table";
const defaultValue = "00";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "time-table",
emits: ["on-select"],
setup(__props, { expose: __expose, emit: emits }) {
const typeRefs = ref([]);
const hourList = generateArray(24);
const minuteList = generateArray(60);
const secondList = generateArray(60);
const globalValue = ref(["", "", ""]);
const setNow = () => {
const now = dayjs().format("HH:mm:ss");
globalValue.value = now.split(":");
for (let i = 0; i < globalValue.value.length; i++) {
const item = globalValue.value[i];
scrollTo(i, item);
}
};
const handleClick = (index, item) => {
globalValue.value[index] = item;
scrollTo(index, item);
setDefault();
handleSelect();
};
const setDefault = () => {
for (let i = 0; i < globalValue.value.length; i++) {
const element = globalValue.value[i];
if (!element) {
globalValue.value[i] = defaultValue;
scrollTo(i);
}
}
};
const handleSelect = () => {
emits("on-select", globalValue.value.join(":"));
};
const scrollTo = (i, item = defaultValue) => typeRefs.value[i].scrollToItem(item);
const getTime = () => {
if (globalValue.value.filter((item) => !!item).length === 0) {
setNow();
}
return globalValue.value.join(":");
};
__expose({
getTime,
setNow
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(name)
}, [
createElementVNode("div", {
class: normalizeClass(`${name}-header`)
}, [
createElementVNode("span", {
class: normalizeClass(`${name}-header-inner`)
}, " 选择时间 ", 2)
], 2),
createElementVNode("div", {
class: normalizeClass(`${name}-body`)
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList([unref(hourList), unref(minuteList), unref(secondList)], (items, index) => {
return openBlock(), createBlock(unref(RecycleScroller), {
listClass: "time-col-scroller-list",
ref_for: true,
ref: (el) => typeRefs.value[index] = el,
class: normalizeClass(`${name}-time-col`),
items,
"item-size": 28
}, {
default: withCtx(({ item }) => [
createElementVNode("div", {
class: normalizeClass([`${name}-col-cell`, { active: item === globalValue.value[index] }]),
onClick: ($event) => handleClick(index, item)
}, [
createElementVNode("span", {
class: normalizeClass(`${name}-col-cell-inner`)
}, toDisplayString(item), 3)
], 10, _hoisted_1)
]),
_: 2
}, 1032, ["class", "items"]);
}), 256))
], 2)
]);
};
}
});
export {
_sfc_main as default
};