saturn-ui/lib/IceImage/index.js

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

import { defineComponent, ref, onMounted, openBlock, createElementBlock, normalizeStyle, createElementVNode } from 'vue';

const _hoisted_1 = ["src"];
var script = defineComponent({
    props: {
        src: { type: String, required: false },
        width: { type: Number, required: false },
        height: { type: Number, required: false }
    },
    setup(__props) {
        const props = __props;
        const DEFAULTIMAGE = '/packages/IceImage/default.svg';
        const LOSINGIMAGE = '/packages/IceImage/losing.svg';
        const iceimage = ref(null);
        const currentlabel = ref();
        const currentImage = ref(DEFAULTIMAGE);
        const hasScrolled = (el, direction = 'vertical') => {
            const overflow = el.style ? el.style.overflow : window.getComputedStyle(el).getPropertyValue('overflow');
            if (overflow === 'hidden') {
                return false;
            }
            if (direction === 'vertical') {
                return el.scrollHeight > el.clientHeight;
            }
            if (direction === 'horizontal') {
                return el.scrollWidth > el.clientWidth;
            }
            return false;
        };
        const isViewingArea = () => {
            const offset = iceimage.value?.getBoundingClientRect();
            const offsetTop = offset?.top;
            const offsetBottom = offset?.bottom;
            if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
                if (props.src) {
                    currentImage.value = String(props.src);
                }
            }
        };
        const bindEventListener = () => {
            if (hasScrolled(currentlabel.value)) {
                currentlabel.value.addEventListener('scroll', () => {
                    isViewingArea();
                }, true);
            }
            else {
                currentlabel.value = currentlabel.value.parentElement;
                bindEventListener();
            }
        };
        const nofind = event => {
            const img = event.srcElement;
            img.src = LOSINGIMAGE;
            img.onerror = null;
        };
        onMounted(() => {
            isViewingArea();
            currentlabel.value = iceimage.value?.parentElement;
            bindEventListener();
        });
        return (_ctx, _cache) => {
            return (openBlock(), createElementBlock("div", {
                ref_key: "iceimage",
                ref: iceimage,
                style: normalizeStyle({ width: __props.width + 'px' || 'auto', height: __props.height + 'px' || 'auto' }),
                class: "ice-image"
            }, [
                createElementVNode("img", {
                    src: currentImage.value,
                    onerror: nofind
                }, null, 8, _hoisted_1)
            ], 4));
        };
    }
});

script.__file = "packages/IceImage/index.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 IceImage = withInstall(script, { name: 'IceImage' });

export { IceImage, IceImage as default };