admin/jurong_circle_frontdesk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

省市区选择不会溢出屏幕

Browse Source
This commit is contained in:
大脏狼
2025-08-27 11:08:35 +08:00
parent 70a85cc6c6
commit 8d0ebfaa6e
2 changed files with 95 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/style.css
View File

@@ -62,6 +62,47 @@ input, textarea, select {
hyphens: auto;
}
/* 移动端级联选择器全局样式 */
.mobile-cascader-popper {
max-width: calc(100vw - 32px) !important;
left: 16px !important;
right: 16px !important;
transform: none !important;
position: fixed !important;
}
.mobile-cascader-popper .el-cascader-panel {
max-width: 100% !important;
overflow-x: auto !important;
display: flex !important;
}
.mobile-cascader-popper .el-cascader-menu {
min-width: 120px !important;
max-width: 150px !important;
flex-shrink: 0 !important;
}
@media (max-width: 480px) {
.mobile-cascader-popper {
max-width: calc(100vw - 20px) !important;
left: 10px !important;
right: 10px !important;
}
.mobile-cascader-popper .el-cascader-menu {
min-width: 100px !important;
max-width: 120px !important;
font-size: 14px !important;
}
.mobile-cascader-popper .el-cascader-menu__item {
padding: 8px 10px !important;
line-height: 1.2 !important;
font-size: 14px !important;
}
}
html, body {
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;

54
src/views/Address.vue
View File

@@ -120,6 +120,12 @@
:options="regionOptions"
placeholder="请选择省市区"
style="width: 100%"
:props="{ expandTrigger: 'hover' }"
:show-all-levels="false"
:collapse-tags="true"
:max-collapse-tags="1"
:teleported="false"
popper-class="mobile-cascader-popper"
@change="handleRegionChange"
/>
</el-form-item>
@@ -607,4 +613,52 @@ onMounted(() => {
width: 95% !important;
}
}
/* 移动端级联选择器样式优化 */
:deep(.mobile-cascader-popper) {
max-width: calc(100vw - 32px) !important;
left: 16px !important;
right: 16px !important;
transform: none !important;
}
:deep(.mobile-cascader-popper .el-cascader-panel) {
max-width: 100% !important;
overflow-x: auto;
display: flex !important;
}
:deep(.mobile-cascader-popper .el-cascader-menu) {
min-width: 120px !important;
max-width: 150px !important;
flex-shrink: 0;
}
@media (max-width: 480px) {
:deep(.mobile-cascader-popper) {
max-width: calc(100vw - 20px) !important;
left: 10px !important;
right: 10px !important;
}
:deep(.mobile-cascader-popper .el-cascader-menu) {
min-width: 100px !important;
max-width: 120px !important;
font-size: 14px;
}
:deep(.mobile-cascader-popper .el-cascader-menu__item) {
padding: 8px 10px;
line-height: 1.2;
font-size: 14px;
}
.address-form :deep(.el-cascader) {
font-size: 14px;
}
.address-form :deep(.el-cascader .el-input__inner) {
font-size: 14px;
}
}
</style>