Vue 右键菜单，告别被屏幕边缘遮挡的尴尬！

前端

2022-11-23 09:50:06

Vue 右键菜单的秘诀：自适应位置实现指南

前言

作为一名前端开发人员，你可能经常遇到这样的烦恼：当你右键点击网页上的某个元素时，弹出的右键菜单却被屏幕边缘遮挡，无法清晰查看。这不仅令人尴尬，还会给用户带来不便。

Vue 右键菜单的解决方案

为了解决这一问题，我们需要让右键菜单能够自适应调整位置，根据屏幕尺寸和位置变化，始终确保菜单清晰可见。在 Vue 中，我们可以通过以下方法实现：

CSS 定位

我们可以使用 CSS 的 position 属性将右键菜单定位在屏幕任意位置。例如，我们可以使用 position: absolute; 将菜单定位在屏幕左上角，再通过 top 和 left 属性指定具体位置。

JavaScript 计算菜单位置

为了让菜单自适应屏幕尺寸和位置，我们需要使用 JavaScript 计算菜单的具体位置。我们可以获取屏幕尺寸 (window.innerWidth 和 window.innerHeight) 和右键点击元素的位置 (getBoundingClientRect() 方法)，并基于这些信息计算菜单位置，确保其清晰可见。

Vue 计算属性

为了简化自适应位置的实现，我们可以使用 Vue 的计算属性。计算属性可以在组件中定义动态计算的属性，其值会根据组件其他属性变化自动更新。在我们的例子中，我们可以使用计算属性计算右键菜单位置，当右键点击元素位置更新时，菜单位置就会随之调整。

代码示例

import { ref, computed } from 'vue'

export default {
  setup() {
    const clickedElementPosition = ref(null)

    // 计算菜单位置
    const menuPosition = computed(() => {
      if (!clickedElementPosition.value) {
        return { top: 0, left: 0 }
      }

      // 根据屏幕尺寸和元素位置计算菜单位置
      const { top, left, width, height } = clickedElementPosition.value.getBoundingClientRect()
      const screenWidth = window.innerWidth
      const screenHeight = window.innerHeight
      const menuWidth = 200
      const menuHeight = 150

      let menuTop = top + height
      let menuLeft = left

      // 确保菜单不超出屏幕边界
      if (menuTop + menuHeight > screenHeight) {
        menuTop = top - menuHeight
      }
      if (menuLeft + menuWidth > screenWidth) {
        menuLeft = left - menuWidth
      }

      return { top: menuTop, left: menuLeft }
    })

    return {
      clickedElementPosition,
      menuPosition
    }
  }
}