feat(cycle-selection): 添加弹窗尺寸自适应功能并优化高度计算
- 新增setPopupSize函数实现弹窗宽度和最大宽度根据屏幕尺寸动态调整 - 优化calculatePopupContentHeight函数,减少padding值 - 添加窗口尺寸和方向变化的事件监听及清理 - 更新.env.development中的代理目标配置
Showing
2 changed files
with
67 additions
and
9 deletions
| 1 | ### | 1 | ### |
| 2 | # @Date: 2023-02-13 14:56:34 | 2 | # @Date: 2023-02-13 14:56:34 |
| 3 | # @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | # @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - # @LastEditTime: 2025-09-09 17:05:22 | 4 | + # @LastEditTime: 2025-09-09 17:56:45 |
| 5 | # @FilePath: /data-table/.env.development | 5 | # @FilePath: /data-table/.env.development |
| 6 | # @Description: 文件描述 | 6 | # @Description: 文件描述 |
| 7 | ### | 7 | ### |
| ... | @@ -23,11 +23,11 @@ VITE_PIN = | ... | @@ -23,11 +23,11 @@ VITE_PIN = |
| 23 | 23 | ||
| 24 | # 反向代理服务器地址 | 24 | # 反向代理服务器地址 |
| 25 | # VITE_PROXY_TARGET = https://oa.anxinchashi.com/ | 25 | # VITE_PROXY_TARGET = https://oa.anxinchashi.com/ |
| 26 | -VITE_PROXY_TARGET = http://oa-dev.onwall.cn | 26 | +# VITE_PROXY_TARGET = http://oa-dev.onwall.cn |
| 27 | # VITE_PROXY_TARGET = http://oa.onwall.cn | 27 | # VITE_PROXY_TARGET = http://oa.onwall.cn |
| 28 | # VITE_PROXY_TARGET = https://www.wxgzjs.cn/ | 28 | # VITE_PROXY_TARGET = https://www.wxgzjs.cn/ |
| 29 | # VITE_PROXY_TARGET = https://oa.baorongsi.com/ | 29 | # VITE_PROXY_TARGET = https://oa.baorongsi.com/ |
| 30 | -# VITE_PROXY_TARGET = https://oa.jcedu.org/ | 30 | +VITE_PROXY_TARGET = https://oa.jcedu.org/ |
| 31 | 31 | ||
| 32 | # PC端地址 | 32 | # PC端地址 |
| 33 | VITE_MOBILE_URL = http://localhost:5173/ | 33 | VITE_MOBILE_URL = http://localhost:5173/ | ... | ... |
| ... | @@ -35,7 +35,7 @@ | ... | @@ -35,7 +35,7 @@ |
| 35 | </template> | 35 | </template> |
| 36 | 36 | ||
| 37 | <script setup> | 37 | <script setup> |
| 38 | -import { ref, onMounted, nextTick } from 'vue'; | 38 | +import { ref, onMounted, nextTick, onUnmounted } from 'vue'; |
| 39 | import { useRouter, useRoute } from 'vue-router'; | 39 | import { useRouter, useRoute } from 'vue-router'; |
| 40 | import { getCycleListAPI } from '@/api/cycle'; | 40 | import { getCycleListAPI } from '@/api/cycle'; |
| 41 | import { styleColor } from '@/constant.js'; | 41 | import { styleColor } from '@/constant.js'; |
| ... | @@ -59,6 +59,45 @@ const selectedCycle = ref(''); | ... | @@ -59,6 +59,45 @@ const selectedCycle = ref(''); |
| 59 | const cycle_note = ref(''); | 59 | const cycle_note = ref(''); |
| 60 | 60 | ||
| 61 | /** | 61 | /** |
| 62 | + * 动态设置弹框尺寸 | ||
| 63 | + */ | ||
| 64 | +const setPopupSize = () => { | ||
| 65 | + nextTick(() => { | ||
| 66 | + const popupElement = document.querySelector('.cycle-popup'); | ||
| 67 | + if (popupElement) { | ||
| 68 | + const screenWidth = window.innerWidth; | ||
| 69 | + const screenHeight = window.innerHeight; | ||
| 70 | + | ||
| 71 | + // 设置宽度为屏幕的85% | ||
| 72 | + const popupWidth = screenWidth * 0.85; | ||
| 73 | + popupElement.style.width = `${popupWidth}px`; | ||
| 74 | + | ||
| 75 | + // 根据屏幕尺寸动态计算最大宽度 | ||
| 76 | + let maxWidth; | ||
| 77 | + if (screenWidth <= 480) { | ||
| 78 | + // 小屏设备 | ||
| 79 | + maxWidth = screenWidth * 0.9; | ||
| 80 | + } else if (screenWidth <= 768) { | ||
| 81 | + // 中等屏幕设备 | ||
| 82 | + maxWidth = 420; | ||
| 83 | + } else { | ||
| 84 | + // 大屏设备 | ||
| 85 | + maxWidth = 500; | ||
| 86 | + } | ||
| 87 | + | ||
| 88 | + popupElement.style.maxWidth = `${maxWidth}px`; | ||
| 89 | + | ||
| 90 | + // 设置高度为屏幕的70% | ||
| 91 | + const popupHeight = screenHeight * 0.7; | ||
| 92 | + popupElement.style.height = `${popupHeight}px`; | ||
| 93 | + | ||
| 94 | + // 计算内容区域高度 | ||
| 95 | + calculatePopupContentHeight(); | ||
| 96 | + } | ||
| 97 | + }); | ||
| 98 | +}; | ||
| 99 | + | ||
| 100 | +/** | ||
| 62 | * 动态计算弹窗内容区域高度 | 101 | * 动态计算弹窗内容区域高度 |
| 63 | */ | 102 | */ |
| 64 | const calculatePopupContentHeight = () => { | 103 | const calculatePopupContentHeight = () => { |
| ... | @@ -72,7 +111,7 @@ const calculatePopupContentHeight = () => { | ... | @@ -72,7 +111,7 @@ const calculatePopupContentHeight = () => { |
| 72 | const popupHeight = popupElement.offsetHeight; | 111 | const popupHeight = popupElement.offsetHeight; |
| 73 | const headerHeight = headerElement.offsetHeight; | 112 | const headerHeight = headerElement.offsetHeight; |
| 74 | const footerHeight = footerElement.offsetHeight; | 113 | const footerHeight = footerElement.offsetHeight; |
| 75 | - const padding = 100; // 上下padding和margin的总和 | 114 | + const padding = 40; // 上下padding的总和 |
| 76 | 115 | ||
| 77 | const contentHeight = popupHeight - headerHeight - footerHeight - padding; | 116 | const contentHeight = popupHeight - headerHeight - footerHeight - padding; |
| 78 | contentElement.style.height = `${contentHeight}px`; | 117 | contentElement.style.height = `${contentHeight}px`; |
| ... | @@ -81,6 +120,13 @@ const calculatePopupContentHeight = () => { | ... | @@ -81,6 +120,13 @@ const calculatePopupContentHeight = () => { |
| 81 | }; | 120 | }; |
| 82 | 121 | ||
| 83 | /** | 122 | /** |
| 123 | + * 窗口尺寸变化处理函数 | ||
| 124 | + */ | ||
| 125 | +const handleResize = () => { | ||
| 126 | + setPopupSize(); | ||
| 127 | +}; | ||
| 128 | + | ||
| 129 | +/** | ||
| 84 | * 获取周期列表 | 130 | * 获取周期列表 |
| 85 | * @param {string} form_code 表单唯一标识 | 131 | * @param {string} form_code 表单唯一标识 |
| 86 | */ | 132 | */ |
| ... | @@ -96,8 +142,8 @@ const getCycleList = async (form_code) => { | ... | @@ -96,8 +142,8 @@ const getCycleList = async (form_code) => { |
| 96 | // 设置周期列表 | 142 | // 设置周期列表 |
| 97 | cycleList.value = data.cycle_list; | 143 | cycleList.value = data.cycle_list; |
| 98 | cycle_note.value = data.cycle_note; | 144 | cycle_note.value = data.cycle_note; |
| 99 | - // 计算高度 | 145 | + // 设置弹框尺寸 |
| 100 | - calculatePopupContentHeight(); | 146 | + setPopupSize(); |
| 101 | } else { | 147 | } else { |
| 102 | // 如果不需要周期选择,检查未完成表单后跳转到目标页面 | 148 | // 如果不需要周期选择,检查未完成表单后跳转到目标页面 |
| 103 | const targetRoute = sessionStorage.getItem('cycle_target_route'); | 149 | const targetRoute = sessionStorage.getItem('cycle_target_route'); |
| ... | @@ -192,6 +238,17 @@ onMounted(() => { | ... | @@ -192,6 +238,17 @@ onMounted(() => { |
| 192 | console.error('缺少表单代码参数'); | 238 | console.error('缺少表单代码参数'); |
| 193 | $router.replace('/'); | 239 | $router.replace('/'); |
| 194 | } | 240 | } |
| 241 | + | ||
| 242 | + // 监听窗口尺寸变化 | ||
| 243 | + window.addEventListener('resize', handleResize); | ||
| 244 | + // 监听屏幕方向变化 | ||
| 245 | + window.addEventListener('orientationchange', handleResize); | ||
| 246 | +}); | ||
| 247 | + | ||
| 248 | +onUnmounted(() => { | ||
| 249 | + // 清理事件监听器 | ||
| 250 | + window.removeEventListener('resize', handleResize); | ||
| 251 | + window.removeEventListener('orientationchange', handleResize); | ||
| 195 | }); | 252 | }); |
| 196 | </script> | 253 | </script> |
| 197 | 254 | ||
| ... | @@ -206,14 +263,15 @@ onMounted(() => { | ... | @@ -206,14 +263,15 @@ onMounted(() => { |
| 206 | } | 263 | } |
| 207 | 264 | ||
| 208 | .cycle-popup { | 265 | .cycle-popup { |
| 209 | - width: 100%; | 266 | + width: 85vw; |
| 210 | - max-width: 380px; | ||
| 211 | height: 70vh; | 267 | height: 70vh; |
| 212 | background: white; | 268 | background: white; |
| 213 | border-radius: 12px; | 269 | border-radius: 12px; |
| 214 | display: flex; | 270 | display: flex; |
| 215 | flex-direction: column; | 271 | flex-direction: column; |
| 216 | overflow: hidden; | 272 | overflow: hidden; |
| 273 | + position: relative; | ||
| 274 | + margin: 0 auto; | ||
| 217 | } | 275 | } |
| 218 | 276 | ||
| 219 | .popup-header { | 277 | .popup-header { | ... | ... |
-
Please register or login to post a comment