优化顶部导航显示与交互

Tevin

2020-12-29 e717135aa986827ebf0a42cdee70ebf888d98987

 common/Tools.js

@@ -4,6 +4,7 @@
 */

import moment from 'moment';
import Taro from '@tarojs/taro';

export class Tools {

@@ -37,6 +38,19 @@
    }

    /**
     * 显示消息
     * @param msg
     */
    static toast(msg) {
        Taro.showToast({
            title: msg,
            icon: 'none',
            mask: true,
            duration: 2000,
        });
    }

    /**
     * 读取文件 base64
     * @param {File} file
     * @return {Promise<string>}
@@ -48,116 +62,6 @@
            reader.onerror = error => reject(error);
            reader.readAsDataURL(file);
        });
    }

    /**
     * 关闭页面 loading
     */
    static closePageLoading() {
        const $Loading = document.getElementById('loading');
        $Loading.className = 'loading off';
        setTimeout(() => {
            if ($Loading.parentNode) {
                $Loading.parentNode.removeChild($Loading);
            }
        }, 300);
    }

    /**
     * 计算浏览器滚动条宽度
     * @param {HTMLElement} elm
     * @return {Number}
     */
    static getScrollbarWidth(elm) {
        // 传入了元素，计算元素滚动条宽度
        if (elm) {
            return elm.offsetWidth - elm.clientWidth;
        }
        // 没传入元素，计算系统滚动条宽度
        else {
            let dom = document.createElement('div'),
                styles = {
                    width: '100px',
                    height: '100px',
                    // 设置滚动条
                    overflowY: 'scroll',
                }, i, scrollbarWidth;
            for (i in styles) dom.style[i] = styles[i];
            document.body.appendChild(dom);
            scrollbarWidth = dom.offsetWidth - dom.clientWidth;
            dom.remove();
            return scrollbarWidth;
        }
    }

    /**
     * 设置元素样式
     * @param {HTMLElement} elm
     * @param {Object} styles
     */
    static setElementStyles(elm, styles) {
        Object.keys(styles).forEach(prop => {
            elm.style[prop] = styles[prop];
        });
    }

    /**
     * 创建 css 带前缀样式
     * @param {String} key
     * @param {String} value
     * @return {Object}
     */
    static createPrefixesCss(key, value) {
        return {
            ['Webkit' + key.substr(0, 1).toUpperCase() + key.substr(1)]: value,
            ['Moz' + key.substr(0, 1).toUpperCase() + key.substr(1)]: value,
            key: value,
        };
    }

    /**
     * 创建 transform translate3d 样式
     * @param {Number} x = 0
     * @param {Number} y = 0
     * @param {Number} z = 0
     * @return {Object}
     */
    static createTransformTs3d(x = 0, y = 0, z = 0) {
        return Tools.createPrefixesCss('transform', `translate3d(${x}px, ${y}px, ${z}px)`);
    }

    /**
     * 获取元素计算后的样式
     * @param {HTMLElement} element
     * @param {String} styleName
     * @return {String}
     */
    static getComputedStyle(element, styleName) {
        if (element.currentStyle) {
            return element.currentStyle[styleName];
        } else {
            return window.getComputedStyle(element, null)[styleName] ||
                document.defaultView.getComputedStyle(element, null)[styleName];
        }
    }

    /**
     * 判断元素是否在容器内
     * @param {HTMLElement} targetElm
     * @param {HTMLElement} containerElm
     * @return {Boolean}
     */
    static isElementInsideContainer(targetElm, containerElm) {
        let inside = false;
        while (targetElm.parentElement) {
            if (targetElm.parentElement === containerElm) {
                inside = true;
                break;
            } else {
                targetElm = targetElm.parentElement;
            }
        }
        return inside;
    }

    /**
@@ -273,32 +177,32 @@
        return true;
    }

    static getObjDataByPath(obj, path) {
        const arr = path.split('.');
        const reg2 = /\[(.*)]/g;
        const reg4 = /\w+(?=\[)|(?<=\[)(.*?)(?=])/g;
        let stack = [];
        let temp;
        arr.forEach(item => {
            if (reg2.test(item)) {
                while ((temp = reg4.exec(item))) {
                    stack.push(temp[0]);
                }
            } else {
                stack.push(item);
            }
        });
        stack = stack.map(item => {
            return item.replace(/^['"`]|['"`]$/g, '');
        });
        try {
            return stack.reduce((pre, next) => {
                return pre[next];
            }, obj);
        } catch (err) {
            return undefined;
        }
    }
    // static getObjDataByPath(obj, path) {
    //     const arr = path.split('.');
    //     const reg2 = /\[(.*)]/g;
    //     const reg4 = /\w+(?=\[)|(?<=\[)(.*?)(?=])/g;
    //     let stack = [];
    //     let temp;
    //     arr.forEach(item => {
    //         if (reg2.test(item)) {
    //             while ((temp = reg4.exec(item))) {
    //                 stack.push(temp[0]);
    //             }
    //         } else {
    //             stack.push(item);
    //         }
    //     });
    //     stack = stack.map(item => {
    //         return item.replace(/^['"`]|['"`]$/g, '');
    //     });
    //     try {
    //         return stack.reduce((pre, next) => {
    //             return pre[next];
    //         }, obj);
    //     } catch (err) {
    //         return undefined;
    //     }
    // }

    /**
     * 统计字符串占位宽度