fix:修复放大情况下下拉偏移的情况

This commit is contained in:
2026-02-13 10:43:09 +08:00
parent ea67e30fbb
commit abf78124cf
6 changed files with 33 additions and 23 deletions
+3 -2
View File
@@ -66,9 +66,10 @@ export default defineComponent({
)
const dropdownStyle = computed<CSSProperties>(() => {
const zoom = parseFloat(getComputedStyle(document.body).zoom) || 1
return {
left: `${dropdownPosition.x}px`,
top: `${dropdownPosition.y}px`,
left: `${dropdownPosition.x / zoom}px`,
top: `${dropdownPosition.y / zoom}px`,
visibility: isShow.value ? 'visible' : 'hidden',
}
})
@@ -55,10 +55,11 @@ export default defineComponent({
function onResize() {
if (triggerRef.value) {
const { width, height, left, top } = triggerRef.value.getBoundingClientRect()
const zoom = parseFloat(getComputedStyle(document.body).zoom) || 1
dropdownPosition.value = {
w: width,
x: left,
y: top + height + 2,
w: width / zoom,
x: left / zoom,
y: top / zoom + height / zoom + 2,
}
}
}
@@ -56,17 +56,18 @@ export default defineComponent({
const dropdownPosition = ref({ x: 0, y: 0, w: 0, z: 0 })
// 下拉框位置
const dropdownStyle = computed<CSSProperties>(() => {
const zoom = parseFloat(getComputedStyle(document.body).zoom) || 1
if (dropdownPosition.value.z == 0) {
return {
left: `${dropdownPosition.value.x}px`,
top: `${dropdownPosition.value.y}px`,
width: `${dropdownPosition.value.w}px`,
left: `${dropdownPosition.value.x / zoom}px`,
top: `${dropdownPosition.value.y / zoom}px`,
width: `${dropdownPosition.value.w / zoom}px`,
}
} else {
return {
left: `${dropdownPosition.value.x}px`,
bottom: `${dropdownPosition.value.z}px`,
width: `${dropdownPosition.value.w}px`,
left: `${dropdownPosition.value.x / zoom}px`,
bottom: `${dropdownPosition.value.z / zoom}px`,
width: `${dropdownPosition.value.w / zoom}px`,
}
}
})
@@ -82,10 +82,11 @@ export default defineComponent({
function onResize() {
if (triggerRef.value) {
const { width, height, left, top } = triggerRef.value.getBoundingClientRect()
const zoom = parseFloat(getComputedStyle(document.body).zoom) || 1
dropdownPosition.value = {
w: width,
x: left - 2,
y: top + height + 2,
w: width / zoom,
x: left / zoom - 2,
y: (top + height + 2) / zoom,
}
}
}
@@ -80,17 +80,18 @@ export default defineComponent({
const dropdownPosition = ref({ x: 0, y: 0, w: 0, z: 0 })
// 下拉框位置
const dropdownStyle = computed<CSSProperties>(() => {
const zoom = parseFloat(getComputedStyle(document.body).zoom) || 1
if (dropdownPosition.value.z == 0) {
return {
left: `${dropdownPosition.value.x}px`,
top: `${dropdownPosition.value.y}px`,
width: `${dropdownPosition.value.w}px`,
left: `${dropdownPosition.value.x / zoom}px`,
top: `${dropdownPosition.value.y / zoom}px`,
width: `${dropdownPosition.value.w / zoom}px`,
}
} else {
return {
left: `${dropdownPosition.value.x}px`,
bottom: `${dropdownPosition.value.z}px`,
width: `${dropdownPosition.value.w}px`,
left: `${dropdownPosition.value.x / zoom}px`,
bottom: `${dropdownPosition.value.z / zoom}px`,
width: `${dropdownPosition.value.w / zoom}px`,
}
}
})
@@ -102,14 +103,14 @@ export default defineComponent({
dropdownPosition.value = {
w: width,
x: left,
y: top + height + 2,
y: (top + height + 2),
z: 0,
}
} else {
dropdownPosition.value = {
w: width,
x: left,
z: window.innerHeight - top + 2,
z: (window.innerHeight - top + 2),
y: 0,
}
}