这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
下图这个情景,你是否也遇到过?
当你右键点击网页上的某个元素时,弹出的菜单被屏幕边缘遮挡了,导致你无法看清或选择菜单项?
上图中右键菜单的选项并不是固定不变的,它会根据不同的元素或场景来显示不同的选项。
也就是说,菜单的内容和大小都是动态生成的,而不是预先设定好的。
这就给我们调整菜单位置带来了一定的难度,不过当你看完这篇文章所有的问题都不再是问题。
分析问题
遇事不决先画图,我们要解决的问题本质上就是菜单生成的位置,所以我们画个图来找一下头绪:
我们通过上图可以知道,菜单能否在视口中放得下,取决于两个条件:
windowW(视口宽度) - mouseX(鼠标 x 坐标) > menuW(菜单宽度)
windowH(视口高度) - mouseY(鼠标 y 坐标) > menuH(菜单高度)
当同时满足这两个条件的时候说明菜单放得下,那我们就要思考如果不满足条件的时候怎么办了。
如果不满足条件一说明宽度放不下,那我们就让菜单生成到鼠标的左边 mouseX - menuW
,就像下图这样。
如果不满足条件二说明高度放不下,那我们就让菜单贴底 windowH - menuH
,像这样。
那如果两个条件都不满足,就同时应用两个解决办法。
解决问题
先来看一下现在的代码:
<template> <div ref="containerRef"> <slot></slot> <Teleport to="body"> <div v-if="showMenu" class="context-menu" :style="{ left: mouseX + 'px', top: mouseY + 'px', }"> <div class="menu-list"> <div @click="handleClick(item)" class="menu-item" v-for="(item, i) in menu" :key="item.label"> {{ item.label }} </div> </div> </div> </Teleport> </div> </template> <script setup> import { ref } from 'vue'; import useContextMenu from './useContextMenu'; const props = defineProps({ menu: { type: Array, default: () => [], }, }); const containerRef = ref(null); const { mouseX, mouseY, showMenu } = useContextMenu(containerRef); function handleClick() { showMenu.value = false; } </script>
看到我们现在是直接将鼠标的坐标赋值给了菜单,那么接下来就要给菜单一个经过计算的合适位置。
我们知道视口的大小、鼠标的位置、菜单的大小都是会变化的,所以这几个数据都要是响应式。
现在仅仅知道鼠标的位置,还需要知道视口与菜单的大小。
视口大小我们写一个函数来监听视口大小的变化:
import { ref } from "vue"; const windowW = ref(document.documentElement.clientWidth); const windowH = ref(document.documentElement.clientHeight); window.addEventListener("resize", () => { windowW.value = document.documentElement.clientWidth; windowH.value = document.documentElement.clientHeight; }); export default function () { return { windowW, windowH, }; }
const map = new WeakMap(); const ob = new ResizeObserver((entries) => { for (const entry of entries) { // 这个元素对应的回调函数? const handler = map.get(entry.target); if (handler) { const box = entry.borderBoxSize[0]; handler({ width: box.inlineSize, height: box.blockSize, }); } } }); export default { mounted(el, binding) { // 监视尺寸变化 ob.observe(el); map.set(el, binding.value); }, unmounted(el) { // 取消监听 ob.unobserve(el); }, };
现在这些值我们都已经知道了,我们去实现一下。
<template> <div ref="containerRef"> <slot></slot> <Teleport to="body"> <!-- 将计算好的位置赋值给菜单 --> <div v-if="showMenu" class="context-menu" :style="{ left: pos.posX + 'px', top: pos.posY + 'px', }"> <!-- 指令为全局指令,在菜单上使用指令来监听菜单尺寸的变化并触发函数 --> <div v-size-ob="handleSize" class="menu-list"> <div @click="handleClick(item)" class="menu-item" v-for="(item, i) in menu" :key="item.label"> {{ item.label }} </div> </div> </div> </Teleport> </div> </template> <script setup> import { ref } from 'vue'; import useContextMenu from './useContextMenu'; import { computed } from '@vue/reactivity'; // 引入监听视口大小的函数 import useViewport from './useViewport'; const props = defineProps({ menu: { type: Array, default: () => [], }, }); const containerRef = ref(null); const { mouseX, mouseY, showMenu } = useContextMenu(containerRef); // 声明两个响应式变量,用来记录菜单大小的变化。 const menuW = ref(0); const menuH = ref(0); function handleSize({ width, height }) { menuW.value = width; menuH.value = height; } // 获得视口的大小 const { windowW, windowH } = useViewport(); // 计算属性,用来计算菜单合适的位置 const pos = computed(() => { let posX = mouseX.value; let posY = mouseY.value; // 宽度放不下生成新的位置 if (mouseX.value > windowW.value - menuW.value) { posX = mouseX.value - menuW.value } // 高度放不下生成新的位置 if (mouseY.value > windowH.value - menuH.value) { posY = windowH.value - menuH.value } return { posX, posY, }; }); function handleClick() { showMenu.value = false; } </script>
我们现在来看一下效果如何。
效果完美!
总结
这样,我们就实现了一个简单的右键菜单,它可以根据鼠标的位置和视口的大小自动调整菜单的位置,避免被遮挡。
这个功能虽然看起来不起眼,但是却能提高用户的体验和操作的便捷性。
当然,这个功能还有很多可以改进的地方,比如菜单的样式、动画、交互等等。文章来源:https://www.toymoban.com/news/detail-710466.html
本文转载于:
https://juejin.cn/post/7250284380231712828
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
文章来源地址https://www.toymoban.com/news/detail-710466.html
到了这里,关于记录--Vue 右键菜单的秘密:自适应位置的实现方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!