From c2b526285b6f9f2cf845727580f2fe520666d528 Mon Sep 17 00:00:00 2001 From: toesbieya <1647775459@qq.com> Date: Mon, 1 Feb 2021 14:01:03 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BE=9D=E8=B5=96=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue/full/package-lock.json | 6 +- vue/full/package.json | 5 +- .../asset/style/cover/el-admin-layout.scss | 4 + vue/full/src/asset/style/index.scss | 1 + vue/full/src/util/index.js | 99 ++++++++++++++++++- .../_common/ListPage/autoAdaptHeightMixin.js | 18 ++-- 6 files changed, 117 insertions(+), 16 deletions(-) create mode 100644 vue/full/src/asset/style/cover/el-admin-layout.scss diff --git a/vue/full/package-lock.json b/vue/full/package-lock.json index 19758f0..e4039b5 100644 --- a/vue/full/package-lock.json +++ b/vue/full/package-lock.json @@ -4535,9 +4535,9 @@ "dev": true }, "el-admin-layout": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/el-admin-layout/-/el-admin-layout-0.4.0.tgz", - "integrity": "sha512-V4tuNYZVMoBRZjeoRsoMYOqE1iZiaXbSYfWDHYwuQZQ4GVZBvqma9lxujOdeV8E/+JkORAUrffxsOfZxYio7Dw==" + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/el-admin-layout/-/el-admin-layout-0.5.1.tgz", + "integrity": "sha512-nFtk2zrpJ6xsxJM3tAD7+qjHYvBA2MHcayEO6nU3kRpmeC/K0Zxw4WNEUlxbhqCTzziTIX6xl/0Hr325EorvKA==" }, "electron-to-chromium": { "version": "1.3.633", diff --git a/vue/full/package.json b/vue/full/package.json index 2231948..209fcc9 100644 --- a/vue/full/package.json +++ b/vue/full/package.json @@ -10,7 +10,7 @@ "dependencies": { "axios": "^0.21.1", "decimal.js": "^10.2.1", - "el-admin-layout": "^0.4.0", + "el-admin-layout": "^0.5.1", "element-ui": "^2.14.1", "file-saver": "^2.0.5", "js-md5": "^0.7.3", @@ -40,7 +40,6 @@ } }, "browserslist": [ - "> 1%", - "last 2 versions" + "Chrome > 80" ] } diff --git a/vue/full/src/asset/style/cover/el-admin-layout.scss b/vue/full/src/asset/style/cover/el-admin-layout.scss new file mode 100644 index 0000000..7da79ad --- /dev/null +++ b/vue/full/src/asset/style/cover/el-admin-layout.scss @@ -0,0 +1,4 @@ +//如果使用auto的话，滚动条会占据容器宽度，这样的自适应高度比较麻烦，所以偷个懒 +.page-main > .scroll-container { + overflow: overlay; +} diff --git a/vue/full/src/asset/style/index.scss b/vue/full/src/asset/style/index.scss index a7ad851..db86bfb 100644 --- a/vue/full/src/asset/style/index.scss +++ b/vue/full/src/asset/style/index.scss @@ -6,6 +6,7 @@ //layout中的样式需要覆盖element-ui原定义，所以放element-ui的后面 @import "~@/layout/style.scss"; @import "./cover/element-ui.scss"; +@import "./cover/el-admin-layout.scss"; @import "./nprogress.scss"; html { diff --git a/vue/full/src/util/index.js b/vue/full/src/util/index.js index 0aae132..102948a 100644 --- a/vue/full/src/util/index.js +++ b/vue/full/src/util/index.js @@ -1,6 +1,101 @@ -import {isEmpty, getInitialValue, debounce, bindThis, deepClone} from "el-admin-layout/src/util" +/** + * 判断是否为空值，undefined、null、'' 都视为空值 + * + * @param str 不定参数 + * @return {boolean} 若为空值，返回true，否则返回false + */ +export function isEmpty(...str) { + return str.some(i => i === undefined || i === null || i === '') +} + +/** + * 根据传入值的类型，返回基础起始值 + * + * @param v + * @return {boolean|{}|string|*[]|number|null} + */ +export function getInitialValue(v) { + if (v === undefined || v === null) return null + if (typeof v === 'string') return '' + if (typeof v === 'boolean') return false + if (typeof v === 'number') return 0 + if (typeof v === 'object') return {} + if (Array.isArray(v)) return [] +} -export {isEmpty, getInitialValue, debounce, bindThis, deepClone} +/** + * 防抖 + * + * @param func {function} 原函数 + * @param wait {number} 防抖间隔，单位毫秒 + * @param immediate {boolean} 是否立即执行一次 + * @return {function} 经过防抖包装后的函数 + */ +export function debounce(func, wait = 100, immediate = false) { + let timeout, args, context, timestamp, result + + const later = function () { + // 据上一次触发时间间隔 + const last = new Date().getTime() - timestamp + + // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait + if (last < wait && last > 0) { + timeout = window.setTimeout(later, wait - last) + } + else { + timeout = null + // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用 + if (!immediate) { + result = func.apply(context, args) + if (!timeout) context = args = null + } + } + } + + return function () { + context = this + args = arguments + timestamp = new Date().getTime() + const callNow = immediate && !timeout + // 如果延时不存在，重新设定延时 + if (!timeout) timeout = window.setTimeout(later, wait) + if (callNow) { + result = func.apply(context, args) + context = args = null + } + + return result + } +} + +//将传入对象的所有函数的this绑定为其自身 +export function bindThis(obj, root = obj) { + if (!obj || typeof obj !== 'object') return + + Object.entries(obj).forEach(([k, v]) => { + if (typeof v === 'function') { + obj[k] = v.bind(root) + } + bindThis(v, root) + }) + + return obj +} + +export function deepClone(source) { + if (source === null || typeof source !== 'object' || source instanceof Promise) { + return source + } + + if (Array.isArray(source)) { + return source.map(i => deepClone(i)) + } + + return Object.keys(source).reduce((obj, key) => { + obj[key] = deepClone(source[key]) + return obj + }, {}) +} /** * 当传入空值时，返回默认值 diff --git a/vue/full/src/view/_common/ListPage/autoAdaptHeightMixin.js b/vue/full/src/view/_common/ListPage/autoAdaptHeightMixin.js index 9291014..1427abb 100644 --- a/vue/full/src/view/_common/ListPage/autoAdaptHeightMixin.js +++ b/vue/full/src/view/_common/ListPage/autoAdaptHeightMixin.js @@ -3,7 +3,6 @@ * 监听el-table，动态设置max-height属性 */ -import {debounce} from "@/util" import {findComponentByTag} from "@/util/vue" export default { @@ -13,7 +12,6 @@ export default { tableMaxHeight: undefined, //上一次的maxHeight，解决resize时表格高度不正确 lastTableMaxHeight: undefined, - //表格距离卡片容器底部的理想距离 expectedDistance: undefined } @@ -41,9 +39,12 @@ export default { this.calcExpectedDistance() } - const overHeight = containerDistance + this.expectedDistance - tableDistance + //期望的表格距离视窗底部的距离 + const expectedTableDistance = containerDistance + this.expectedDistance + //超出期望的距离，必定是非负数 + const overHeight = expectedTableDistance - tableDistance - //overHeight为0说明表格刚好在卡片容器内 + //overHeight为0说明表格在卡片容器内 if (overHeight === 0) { this.tableMaxHeight = this.lastTableMaxHeight } @@ -55,9 +56,6 @@ export default { }, mounted() { - //resize必须异步，否则新版chrome(87.0.4280.88)会出问题 - this.resize = debounce(this.resize, 0) - this.resizeObserver = new ResizeObserver(this.resize) this.resizeObserver.observe(this.$el) const searchFormInstance = findComponentByTag(this, 'search-form') @@ -65,8 +63,12 @@ export default { this.resizeObserver.observe(searchFormInstance.$el) } + //卸载resizeObserver this.$once('hook:beforeDestroy', () => { - this.resizeObserver && this.resizeObserver.disconnect() + if (this.resizeObserver) { + this.resizeObserver.disconnect() + this.resizeObserver = null + } }) } }