saturn-ui/lib/IceCarousel/index.js

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

import { createElementVNode, defineComponent, getCurrentInstance, ref, reactive, onMounted, watch, openBlock, createElementBlock, Fragment, withDirectives, normalizeStyle, unref, toDisplayString, vShow } 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-carousel",
    ref: "carousel"
};
const _hoisted_2 = { class: "icon" };
const _hoisted_3 = ["data-icon"];
const _hoisted_4 = { class: "val" };
const _hoisted_5 = createElementVNode("span", {
    class: "iconify",
    "data-icon": 'icon-park-outline:close-one'
}, null, -1);
const _hoisted_6 = [
    _hoisted_5
];
var script = defineComponent({
    setup(__props) {
        const instance = getCurrentInstance();
        const mapCalcGrid = {
            icon: 'icon-park-outline:alarm',
            bgcolor: 'red',
            CN: '粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。',
            distance: 0,
            time: 5000
        };
        let timer = null;
        let setTimer = null;
        let box = null;
        const alt = ref(true);
        const test = ref(mapCalcGrid.CN);
        const obj = reactive({
            overflow: 'hidden'
        });
        onMounted(() => {
            setTime();
        });
        function startText() {
            obj.overflow = 'visible';
            const boxlWidth = instance?.refs.box.clientWidth;
            const textWidth = instance?.refs.text.scrollWidth;
            if (textWidth <= boxlWidth)
                return;
            box = instance?.refs.text;
            console.log(box);
            let { distance } = mapCalcGrid;
            timer = setInterval(() => {
                distance -= 1;
                if (-distance >= textWidth) {
                    distance = boxlWidth;
                }
                box.style.transform = `translateX(${distance}px)`;
                mapCalcGrid.distance = distance;
            }, 20);
        }
        function setTime() {
            setTimer = setTimeout(() => {
                alt.value = !alt.value;
            }, mapCalcGrid.time);
        }
        watch(alt, nval => {
            if (!nval) {
                box.style.transform = 'translateX(0px)';
                mapCalcGrid.distance = 0;
                obj.overflow = 'hidden';
            }
        });
        function upshow() {
            alt.value = !alt.value;
        }
        function enter() {
            startText();
            clearTimeout(setTimer);
        }
        function leave() {
            clearInterval(timer);
            setTime();
        }
        function closeBox() {
            clearTimeout(setTimer);
            alt.value = !alt.value;
        }
        return (_ctx, _cache) => {
            return (openBlock(), createElementBlock(Fragment, null, [
                withDirectives(createElementVNode("div", _hoisted_1, [
                    createElementVNode("div", _hoisted_2, [
                        createElementVNode("span", {
                            class: "iconify",
                            "data-icon": mapCalcGrid.icon
                        }, null, 8, _hoisted_3)
                    ]),
                    createElementVNode("div", {
                        ref_key: "box",
                        ref: box,
                        class: "box",
                        onMouseenter: enter,
                        onMouseleave: leave
                    }, [
                        createElementVNode("div", _hoisted_4, [
                            createElementVNode("p", {
                                class: "text1",
                                ref: "text",
                                style: normalizeStyle(unref(obj))
                            }, toDisplayString(test.value), 5)
                        ])
                    ], 544),
                    createElementVNode("div", {
                        class: "close",
                        onClick: closeBox
                    }, _hoisted_6)
                ], 512), [
                    [vShow, alt.value]
                ]),
                createElementVNode("button", {
                    class: "btn",
                    onClick: upshow
                }, "切换")
            ], 64));
        };
    }
});

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

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

export { IceCarousel, IceCarousel as default };