diff --git a/src/components/OnlineFile/index.vue b/src/components/OnlineFile/index.vue index 55c92bf..1f18213 100644 --- a/src/components/OnlineFile/index.vue +++ b/src/components/OnlineFile/index.vue @@ -2,9 +2,11 @@
import { PopupManager } from 'element-ui/lib/utils/popup' +import { defaultModalSize } from '@/settings' export default { data() { return { + defaultModalSize, zIndex: PopupManager.nextZIndex(), showModal: false, codeUri: '' diff --git a/src/layout/components/Navbar/index.vue b/src/layout/components/Navbar/index.vue index 01ea515..b1745e1 100644 --- a/src/layout/components/Navbar/index.vue +++ b/src/layout/components/Navbar/index.vue @@ -16,6 +16,10 @@
+ + + + + + + +
@@ -122,6 +130,7 @@ import SvgIcon from '@/components/SvgIcon/index.vue' import ThemePicker from '@/components/ThemePicker/index.vue' import { PopupManager } from 'element-ui/lib/utils/popup' import Cookies from 'js-cookie' +import { debounce } from '@/utils' export default { components: { ThemePicker, @@ -130,6 +139,9 @@ export default { }, data() { return { + isMenuScroll: false, + scrollOffset: 0, + scrollMaxWidth: 0, isEnvTest: (process.env.ENV === 'staging' || process.env.NODE_ENV === 'development'), zIndex: PopupManager.nextZIndex(), isFullscreen: false, @@ -169,15 +181,59 @@ export default { } } }, - created() { - }, + created() {}, mounted() { document.addEventListener('fullscreenchange', this.handleFullscreen) + this.menuIsOverflow() }, beforeDestroy() { document.removeEventListener('fullscreenchange', this.handleFullscreen) }, methods: { + menuScroll(type = 'prev') { + const offset = 80 + const container = document.querySelector('#navbar-menu') + const scrollTo = (to) => { + container.scrollTo(to, 0) + } + if (type === 'prev') { + if ((container.scrollLeft - offset) > 0) { + scrollTo((container.scrollLeft - offset), 0) + } else { + scrollTo(0, 0) + } + } else { + if ((container.scrollLeft + offset) < this.scrollMaxWidth) { + scrollTo((container.scrollLeft + offset), 0) + } else { + scrollTo(container.scrollWidth, 0) + } + } + }, + menuScrollListener: debounce(function(event) { + this.scrollOffset = event.target.scrollLeft + }), + menuIsOverflow() { + const handle = () => { + const container = document.querySelector('#navbar-menu') + this.isMenuScroll = container.scrollWidth > container.clientWidth + this.scrollMaxWidth = container.scrollWidth - container.clientWidth + if (this.isMenuScroll) { + container.addEventListener('scroll', e => this.menuScrollListener(e)) + } + } + const $watch = this.$watch(() => this.permission_routes, (newVal) => { + if (newVal && newVal instanceof Array && newVal.length > 0) { + this.$nextTick(() => { + setTimeout(handle, 500) + $watch() + }) + } + }, { + deep: true, + immediate: true + }) + }, toggleIframeSidebarOpened() { const iframe = document.querySelector('#iframe-cpn') if (iframe && !document.querySelector('.sidebar-container')) { diff --git a/src/settings.js b/src/settings.js index c82c7c1..56dff0f 100644 --- a/src/settings.js +++ b/src/settings.js @@ -13,5 +13,10 @@ module.exports = { * @type {boolean} true | false * @description Whether show the logo in sidebar */ - sidebarLogo: false + sidebarLogo: false, + + defaultModalSize: { + width: '76vw', + height: '80vh' + } } diff --git a/src/styles/navbar.css b/src/styles/navbar.css index ab642ad..27724b9 100644 --- a/src/styles/navbar.css +++ b/src/styles/navbar.css @@ -40,12 +40,28 @@ .navbar .container .navbar-module { flex: 1; overflow-y: hidden; + position: relative; +} +.navbar .container .navbar-module .navbar-module__scroll--lf { + transform: translateY(-50%); + position: absolute; + top: 50%; + left: 8px; + z-index: 1; +} +.navbar .container .navbar-module .navbar-module__scroll--rt { + transform: translateY(-50%); + position: absolute; + top: 50%; + right: 8px; } .navbar .container .navbar-module .modules__toggler { color: #fff; } .navbar .container .navbar-module #navbar-menu { + scroll-behavior: smooth; overflow-x: scroll; + scrollbar-width: none; } .navbar .container .navbar-module #navbar-menu::-webkit-scrollbar { background-color: transparent; diff --git a/src/styles/navbar.css.map b/src/styles/navbar.css.map index ada4ceb..d416845 100644 --- a/src/styles/navbar.css.map +++ b/src/styles/navbar.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["navbar.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;AAIN;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGJ;EACE;;AAGJ;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMV;EAEI;IACE;;;EAKA;IACE;;;AAKR;EAEI;IACE;;;EAKA;IACE;;EAEF;IACE;IACA;;;AAKR;EAEI;IACE;;EAGA;IACE;;EAIF;IACE;;EAIF;IACE;;;AAON;EACE;;AAEA;EACE;EACA;;AAGJ;EACE;EACA;;AAEF;EACE;;;AAIF;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;;AAIA;EACE;EACA","file":"navbar.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["navbar.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIN;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGJ;EACE;;AAGJ;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMV;EAEI;IACE;;;EAKA;IACE;;;AAKR;EAEI;IACE;;;EAKA;IACE;;EAEF;IACE;IACA;;;AAKR;EAEI;IACE;;EAGA;IACE;;EAIF;IACE;;EAIF;IACE;;;AAON;EACE;;AAEA;EACE;EACA;;AAGJ;EACE;EACA;;AAEF;EACE;;;AAIF;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;;AAIA;EACE;EACA","file":"navbar.css"} \ No newline at end of file diff --git a/src/styles/navbar.scss b/src/styles/navbar.scss index 79e05be..78bed9c 100644 --- a/src/styles/navbar.scss +++ b/src/styles/navbar.scss @@ -39,12 +39,28 @@ .navbar-module { flex: 1; overflow-y: hidden; + position: relative; + .navbar-module__scroll--lf { + transform: translateY(-50%); + position: absolute; + top: 50%; + left: 8px; + z-index: 1; + } + .navbar-module__scroll--rt { + transform: translateY(-50%); + position: absolute; + top: 50%; + right: 8px; + } .modules__toggler { color: #fff; } #navbar-menu { + scroll-behavior: smooth; overflow-x: scroll; + scrollbar-width: none; &::-webkit-scrollbar { background-color: transparent; diff --git a/src/utils/index.js b/src/utils/index.js index c891000..fe19be1 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -180,10 +180,10 @@ export function throttle(fn, interval, immediate = true) { } export function debounce(fn, delay = 500) { let timer = null - return function _debounce() { + return function() { if (timer) clearTimeout(timer) timer = setTimeout(() => { - fn() + fn.call(this, ...arguments) }, delay) } } diff --git a/src/views/system/DashboardComponents/quickMenu.vue b/src/views/system/DashboardComponents/quickMenu.vue index 2f74cf1..fbbc224 100644 --- a/src/views/system/DashboardComponents/quickMenu.vue +++ b/src/views/system/DashboardComponents/quickMenu.vue @@ -31,8 +31,10 @@ show-footer title="快捷菜单" show-confirm-button - :width="600" - :height="600" + show-zoom + resize + :width="defaultModalSize.width" + :height="defaultModalSize.height" esc-closable > @@ -85,6 +87,7 @@ import { index, save, destroy } from '@/api/diyMenu' import { deepCopy } from '@/utils' import { permissions } from '@/api/me' import SvgIcon from '@/components/SvgIcon/index.vue' +import { defaultModalSize } from '@/settings' export default { name: 'QuickMenu', components: { @@ -100,6 +103,7 @@ export default { }, data() { return { + defaultModalSize, loading: false, fileList: [], action: process.env.VUE_APP_UPLOAD_API, diff --git a/src/views/system/DashboardComponents/toDo.vue b/src/views/system/DashboardComponents/toDo.vue index 211ea14..ef26cd2 100644 --- a/src/views/system/DashboardComponents/toDo.vue +++ b/src/views/system/DashboardComponents/toDo.vue @@ -53,11 +53,12 @@ v-model="isShowModal" :z-index="zIndex" transfer + resize show-zoom :fullscreen="$store.getters.device === 'mobile'" title="办理" - width="86vw" - height="80vh" + :width="defaultModalSize.width" + :height="defaultModalSize.height" esc-closable >