birdpaper-ui
Version:
一个通用的 vue3 UI组件库。A common vue3 UI component library.
98 lines (97 loc) • 3.52 kB
JavaScript
;
const vue = require("vue");
const util = require("../../../utils/util.js");
const vueVirtualScroller = require("vue-virtual-scroller");
require("vue-virtual-scroller/dist/vue-virtual-scroller.css");
const dayjs = require("dayjs");
const _hoisted_1 = ["onClick"];
const name = "bp-date-time-table";
const defaultValue = "00";
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "time-table",
emits: ["on-select"],
setup(__props, { expose: __expose, emit: emits }) {
const typeRefs = vue.ref([]);
const hourList = util.generateArray(24);
const minuteList = util.generateArray(60);
const secondList = util.generateArray(60);
const globalValue = vue.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 vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(name)
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(`${name}-header`)
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(`${name}-header-inner`)
}, " 选择时间 ", 2)
], 2),
vue.createElementVNode("div", {
class: vue.normalizeClass(`${name}-body`)
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList([vue.unref(hourList), vue.unref(minuteList), vue.unref(secondList)], (items, index) => {
return vue.openBlock(), vue.createBlock(vue.unref(vueVirtualScroller.RecycleScroller), {
listClass: "time-col-scroller-list",
ref_for: true,
ref: (el) => typeRefs.value[index] = el,
class: vue.normalizeClass(`${name}-time-col`),
items,
"item-size": 28
}, {
default: vue.withCtx(({ item }) => [
vue.createElementVNode("div", {
class: vue.normalizeClass([`${name}-col-cell`, { active: item === globalValue.value[index] }]),
onClick: ($event) => handleClick(index, item)
}, [
vue.createElementVNode("span", {
class: vue.normalizeClass(`${name}-col-cell-inner`)
}, vue.toDisplayString(item), 3)
], 10, _hoisted_1)
]),
_: 2
}, 1032, ["class", "items"]);
}), 256))
], 2)
]);
};
}
});
module.exports = _sfc_main;