nimble-ui/src/Directives/revea/vuePattern/VueRevea.js

基础vue ui库

import { LazyLoadImg, extend, onRender } from 'nimble-lib';

let _revea = {
    name: 'revea',
    /**
     * 初始化图片懒加载
     *
     * @export
     * @param {Object} options 选项
     * @return {Object}
     */
    initLazy (options) {
        options = options || {};
        options = options.Lazy || options;
        let _options = extend({}, {
            throttleWait: 50,
            preLoad: 1,
            loadingSrc: '', // 加载时的图片地址
            errorSrc: '', // 出错后的图片地址
            imgFilter: null, // 图片url过滤器
            isWrap: false, // 加载时是否加包裹元素
            lazyWrapCla: null, // 包裹的class
            lazyCla: null, // 当前加载项的class
            isSetStyle: false, // 是否设置图片style
            // intersectionPattern: false,
            displayScale: 0.6,
            imgRenderer() {},
            observerOptions: {
                threshold: 0.5
            },
            loadData(opts, setState) {
                setState('loadEnd', {});
            }
        }, options);
        let $Revea = LazyLoadImg(_options);
        $Revea.name = '$tRevea';
        let back = {
            name: 'revea',
            bind (el, binding) {
                let val = binding.value;
                if (val && (val.width || val.height)) {
                    getData(binding, el).then((data) => {
                        $Revea.push(el, Object.assign({
                            displayScale: 0.5
                        }, data || {}));
                    });
                }
            },
            inserted (el, binding) { // 保证没传宽度的时候能取到宽度
                let val = binding.value;
                if (!(val && (val.width || val.height))) {
                    onRender(el, (_el) => {
                        if (_el) {
                            getData(binding, _el).then((data) => {
                                $Revea.update(_el, Object.assign({
                                    displayScale: 0.5
                                }, data || {}));
                            });
                        }
                    }, {
                        count: 20,
                        time: 50
                    });
                }
            },
            update (el, binding) {
                getData(binding, el).then((data) => {
                    $Revea.update(el, Object.assign({
                        displayScale: 0.5
                    }, data || {}));
                });
            },
            unbind (el) {
                $Revea.remove(el);
            }
        };
        // _lazy.initLazy = () => {
        //     return {
        //         back,
        //         Lazy
        //     };
        // };
        return {
            directive: back,
            Revea: $Revea
        };
        /**
             * 设置大小
             *
             * @param {Object} binding 指令数据
             * @param {HTMLElement} el 图片的父节点
             * @return {Promise}
             */
        function getData(binding) {
            let _value = formatValue(binding.value);
            return new Promise((resolve, reject) => {
                // let _parent = el.parentNode;
                resolve(Object.assign({}, _value, {
                    src: 'revea'
                }));
            });
        }
        /**
             * 格式化value参数
             *
             * @param {*} val 参数
             * @return {Object}
             */
        function formatValue(val) {
            let res = val;
            if (typeof val === 'string') {
                res = {};
            }
            return res;
        }
    }
};

/**
 * 图片懒加载
 *
 * @export
 * @param {Object} options 选项
 * @return {Object}
 */
export default function VueRevea (options) {
    let res = _revea.initLazy(options);
    return res;
}