saturn-ui/lib/IceNumberFlip/index.js

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

import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString } 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 _hoisted_1 = { class: "ice-number-flop" };
const _hoisted_2 = { class: "front face" };
const _hoisted_3 = { class: "text" };
const _hoisted_4 = { class: "back face" };
const _hoisted_5 = { class: "text" };
var script = defineComponent({
    props: {
        number: { type: Number, required: false, default: 0 },
        separator: { type: String, required: false, default: '' }
    },
    setup(__props) {
        const props = __props;
        const formatNumber = (number, separator) => {
            const fmt = `${(number || 0).toString()}`;
            return fmt.replace(/(\d)(?=(?:\d{3})+$)/g, `$1${separator}`);
        };
        const flipArr = ref();
        const newArr = ref();
        const oldArr = ref();
        onMounted(() => {
            watch(() => props.number, (newVal, oldVal) => {
                newArr.value = formatNumber(newVal, props.separator).split('');
                oldArr.value = formatNumber(oldVal, props.separator).split('');
                console.log('newArr>>>>>>', newArr.value);
                console.log('oldVal>>>>>>', oldArr.value);
                const beforeFlipArr = [];
                const afterFlipArr = [];
                for (let i = 0; i < newArr.value.length; i++) {
                    if (newArr.value[i] !== oldArr.value[i]) {
                        beforeFlipArr.push(true);
                    }
                    else {
                        beforeFlipArr.push(false);
                    }
                    afterFlipArr.push(false);
                }
                flipArr.value = beforeFlipArr;
                setTimeout(() => {
                    flipArr.value = afterFlipArr;
                }, 300);
            }, { immediate: true });
        });
        return (_ctx, _cache) => {
            return (openBlock(), createElementBlock("div", _hoisted_1, [
                (openBlock(true), createElementBlock(Fragment, null, renderList(newArr.value, (item, index) => {
                    return (openBlock(), createElementBlock("div", {
                        class: normalizeClass(['anim-object', 'active', { 'flip-vertical-left': flipArr.value[index] }]),
                        key: index
                    }, [
                        createElementVNode("div", _hoisted_2, [
                            createElementVNode("div", _hoisted_3, toDisplayString(item), 1)
                        ]),
                        createElementVNode("div", _hoisted_4, [
                            createElementVNode("div", _hoisted_5, toDisplayString(oldArr.value[index]), 1)
                        ])
                    ], 2));
                }), 128))
            ]));
        };
    }
});

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

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

export { IceNumberFlip, IceNumberFlip as default };