From e717135aa986827ebf0a42cdee70ebf888d98987 Mon Sep 17 00:00:00 2001 From: Tevin <tingquanren@163.com> Date: Tue, 29 Dec 2020 09:33:37 +0800 Subject: [PATCH] 优化顶部导航显示与交互 --- common/Tools.js | 176 +++++++++++++--------------------------------------------- 1 files changed, 40 insertions(+), 136 deletions(-) diff --git a/common/Tools.js b/common/Tools.js index cebd493..6e240f6 100644 --- a/common/Tools.js +++ b/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; + // } + // } /** * 统计字符串占位宽度 -- Gitblit v1.9.1