saturn-ui/lib/IceClock/index.js

🪐 一款轻量级、模块化的Web可视化UI组件库（含大屏、GIS、图表、视频、后台等模块） 👍

import { defineComponent, ref, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode } from 'vue';

const withInstall = (main, extra) => {
    main.install = (app) => {
        for (const comp of [main, ...Object.values(extra ?? {})]) {
            app.component(comp.name, comp);
        }
    };
    if (extra) {
        for (const [key, comp] of Object.entries(extra)) {
            main[key] = comp;
        }
    }
    return main;
};

const DateFormat = (date, format = 'yyyy-MM-dd hh:mm:ss') => {
    const year = `${date.getFullYear()}`;
    let month = `${date.getMonth() + 1}`;
    if (month.length === 1) {
        month = `0${month}`;
    }
    let day = `${date.getDate()}`;
    if (day.length === 1) {
        day = `0${day}`;
    }
    let hours = `${date.getHours()}`;
    if (hours.length === 1) {
        hours = `0${hours}`;
    }
    let minutes = `${date.getMinutes()}`;
    if (minutes.length === 1) {
        minutes = `0${minutes}`;
    }
    let seconds = `${date.getSeconds()}`;
    if (seconds.length === 1) {
        seconds = `0${seconds}`;
    }
    return format
        .replace(/yyyy/gi, year)
        .replace(/MM/g, month)
        .replace(/dd/gi, day)
        .replace(/hh/gi, hours)
        .replace(/mm/g, minutes)
        .replace(/ss/gi, seconds);
};

const _hoisted_1 = { class: "time" };
const _hoisted_2 = {
    key: 0,
    class: "week"
};
var script = defineComponent({
    props: {
        fontSize: { type: Number, required: false, default: 16 },
        color: { type: String, required: false, default: '#fff' },
        format: { type: String, required: false, default: 'MM月DD日 HH:mm:ss' },
        showWeek: { type: Boolean, required: false, default: true }
    },
    setup(__props) {
        const props = __props;
        const weekDict = ['周日', '周一', '周二', '周三', '周四', '周五'];
        const customStyle = {
            fontSize: `${props.fontSize}px`,
            color: props.color
        };
        const time = ref();
        const week = ref();
        const updateTime = () => {
            const now = new Date();
            time.value = DateFormat(now, props.format);
            week.value = weekDict[now.getDay()];
        };
        updateTime();
        setInterval(updateTime, 1000);
        return (_ctx, _cache) => {
            return (openBlock(), createElementBlock("div", {
                class: "ice-clock",
                style: customStyle
            }, [
                createElementVNode("span", _hoisted_1, toDisplayString(time.value), 1),
                (__props.showWeek)
                    ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(week.value), 1))
                    : createCommentVNode("v-if", true)
            ]));
        };
    }
});

script.__file = "packages/IceClock/index.vue";

const IceClock = withInstall(script, { name: 'IceClock' });

export { IceClock, IceClock as default };