zhaichao/education
1
0
Fork 0
forked from liweijie/education
Code Pull Requests Activity

全局自适应以及表格横向拖动优化

Browse Source
This commit is contained in:
zhaichao
2026-08-23 15:36:11 +08:00
parent 14d4fa7c7c
commit 61ef0c1214
5 changed files with 113 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/styles/index.scss
+32 -1
View File
@@ -1,4 +1,4 @@
@import './variables.scss'; @import './variables.scss';
@import './mixin.scss'; @import './mixin.scss';
@import './transition.scss'; @import './transition.scss';
@import './element-ui.scss'; @import './element-ui.scss';
@@ -41,6 +41,37 @@ html {
height: 100%; height: 100%;
} }
/* ================= 全局自适应加固 =================
与 src/utils/adaptive.js 的视口等比缩放配合，
兜底避免极端情况下出现页面级横向溢出与内容崩塌。 */
html,
body {
width: 100%;
}
body {
/* 禁止页面级横向滚动，防止因个别固定宽度元素把整页撑破；
表格自身的横向滚动由 el-table 内部滚动容器承担，不受影响 */
overflow-x: hidden;
}
/* 弹性布局子项允许收缩，避免 flex 容器被子项固有宽度撑破 */
#app,
.app-wrapper,
.main-container,
.lower-container {
min-width: 0;
}
/* 通用长文本换行，避免 url/数字/英文长串将布局撑破 */
a,
.el-button,
.el-table .cell,
.el-form-item__content,
.el-form-item__label {
word-break: break-word;
}
*, *,
*:before, *:before,
*:after { *:after {
frontend/src/assets/styles/roomroot.scss
+20 -1
View File
@@ -1,4 +1,4 @@
/** /**
* 通用css样式布局处理 * 通用css样式布局处理
* Copyright (c) 2019 roomroot * Copyright (c) 2019 roomroot
*/ */
@@ -93,6 +93,11 @@
} }
.el-table { .el-table {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.el-table__header-wrapper, .el-table__fixed-header-wrapper { .el-table__header-wrapper, .el-table__fixed-header-wrapper {
th { th {
word-break: break-word; word-break: break-word;
@@ -108,6 +113,20 @@
margin-left: 1px; margin-left: 1px;
} }
} }
// 表格横向拖拽滚动：拖拽过程中光标切换为“抓手”
.el-table__body-wrapper.is-dragging,
.el-table__fixed-body-wrapper.is-dragging {
cursor: grabbing;
}
}
/* 原生表格同样禁止选中文本，避免横向滑动/滚动时误触发复制前的文本选中 */
table {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} }
/** 表单布局 **/ /** 表单布局 **/
frontend/src/directive/index.js
+4 -1
View File
@@ -1,9 +1,10 @@
import hasRole from './permission/hasRole' import hasRole from './permission/hasRole'
import hasPermi from './permission/hasPermi' import hasPermi from './permission/hasPermi'
import dialogDrag from './dialog/drag' import dialogDrag from './dialog/drag'
import dialogDragWidth from './dialog/dragWidth' import dialogDragWidth from './dialog/dragWidth'
import dialogDragHeight from './dialog/dragHeight' import dialogDragHeight from './dialog/dragHeight'
import clipboard from './module/clipboard' import clipboard from './module/clipboard'
import tableDrag from './tableDrag'
const install = function(Vue) { const install = function(Vue) {
Vue.directive('hasRole', hasRole) Vue.directive('hasRole', hasRole)
@@ -12,6 +13,8 @@ const install = function(Vue) {
Vue.directive('dialogDrag', dialogDrag) Vue.directive('dialogDrag', dialogDrag)
Vue.directive('dialogDragWidth', dialogDragWidth) Vue.directive('dialogDragWidth', dialogDragWidth)
Vue.directive('dialogDragHeight', dialogDragHeight) Vue.directive('dialogDragHeight', dialogDragHeight)
// 全局表格横向拖拽滚动：通过 document 事件委托自动作用于所有 el-table
tableDrag()
} }
if (window.Vue) { if (window.Vue) {
frontend/src/main.js
+5 -1
View File
@@ -1,4 +1,4 @@
import Vue from 'vue' import Vue from 'vue'
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
@@ -13,6 +13,10 @@ import router from './router'
import directive from './directive' // directive import directive from './directive' // directive
import plugins from './plugins' // plugins import plugins from './plugins' // plugins
import { download } from '@/utils/request' import { download } from '@/utils/request'
import { initAdaptive } from '@/utils/adaptive' // 全局视口等比缩放自适应
// 初始化全局自适应，保障不同大小屏幕下页面布局不崩塌
initAdaptive()
import './assets/icons' // icon import './assets/icons' // icon
import './permission' // permission control import './permission' // permission control
frontend/src/utils/adaptive.js
+52
View File
@@ -0,0 +1,52 @@
/**
* 全局视口等比缩放 —— 让整个系统在不同大小屏幕（桌面 1280~1920）下布局不崩塌。
*
* 原理：
* 以 DESIGN_WIDTH 为设计基准宽度（视觉稿基准）。当视口宽度小于该值时，
* 对整个文档根节点 <html> 应用 zoom = 视口宽度 / DESIGN_WIDTH（不超过 1），
* 使页面内部所有元素（含 Element UI 挂载到 body 的弹窗/提示/下拉等）等比缩小，
* 从而在保持原有表格/表单固定布局不塌陷的前提下，整体适配到当前屏幕。
*
* 说明：
* 1. 仅在“需要缩小”时写入 zoom，宽度 ≥ 设计宽时清除，保证大屏原生 1:1 显示；
* 2. zoom 挂在 documentElement 上，能覆盖包括 Element 弹层在内的所有内容；
* 3. modern Chromium / Edge / Safari 及 Firefox(≥126) 均支持 zoom。
*/
let initialized = false
export const DEFAULT_DESIGN_WIDTH = 1920
/**
* 初始化全局自适应。可在任意入口调用，重复调用幂等。
* @param {number} [designWidth] 设计基准宽度，默认 1920
*/
export function initAdaptive(designWidth = DEFAULT_DESIGN_WIDTH) {
if (initialized) {
return
}
initialized = true
let timer = null
const applyScale = () => {
const root = document.documentElement
const width = (root && root.clientWidth) || window.innerWidth
const scale = Math.min(1, width / designWidth)
// 小于设计宽才缩放，否则清除，避免触发整页缩放动画/重置
if (root) {
root.style.zoom = scale < 1 ? String(scale) : ''
}
}
const onResize = () => {
// 简单防抖，避免 resize 高频触发引起抖动
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(applyScale, 100)
}
applyScale()
window.addEventListener('resize', onResize)
}