fix:修复放大情况下下拉偏移的情况
This commit is contained in:
@@ -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,
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user