需求
在所做的Vue项目中，需要在鼠标移动文字框的时候显示一些详细信息。最终实现的效果如下：
鼠标经过button的时候，可以在光标附近显示出一个悬浮框，显示框里面显示时间和值的信息，鼠标移出button元素的时候，这个显示框会消失。
分析
涉及到鼠标的移动事件。
鼠标事件有下面这几种：
1、onclick(鼠标点击事件)
box.onclick = function(e){
console.log(e)
}
2、onmousedown(鼠标按下事件)
box.onmousedown = function(e){
console.log(e)
}
3、onmouseup(鼠标松开事件)
box.onmouseup = function(e){
console.log(e)
}
4、onmousemove(鼠标移动事件)
box.onmousemove = function(e){
console.log(e)
}
5、onmouseout(鼠标划出事件)
box.onmouseout = function(e){
console.log(e)
}
由鼠标的MouseEvent需要了解几个坐标：
一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标
二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度
三、screenX、screenY 点击位置距离当前电脑屏幕的x，y坐标
四、offsetX、offsetY 相对于带有定位的父盒子的x，y坐标
五、x、y 和screenX、screenY一样
实现
我实现的思路是写了一个默认的空div，用来展示悬浮框信息。展示的悬浮框是绝对定位，一开始是隐藏的，当触发mouseover事件的时候，把display变为block块级元素，然后获取的event事件，
<div id="mouse" v-if="true" class="version_total">
</div>
.version_total{
position: absolute;
width: 10%;
height: 5%;
}
然后真正的div上面写个mousemove 绑定一个方法传递参数和event事件：在这个方法里面更改样式，最后用innerHtml来展现出来，需要给悬浮框的div元素设置top和left属性，具体的代码如下：
复制代码 代码如下:<div :class="[yxInfo[28].value==0 " v-if="yxInfo[28]!=undefined" @mousemove="detailInfo($event,yxInfo[28])" @mouseleave="leave($event)" style="top: 37%;left: 63%">{{yxInfo[28].keyName}}</div>
detailInfo(e,data){
var showDiv = document.getElementById('mouse')
showDiv.style='background-color:#8c8c8c;border:1px solid black'
showDiv.style.height='58px'
showDiv.style.textAlign='left'
showDiv.style.left = (event.pageX-300) + 'px'
showDiv.style.top = (event.pageY-120) + 'px'
showDiv.style.display = 'block'
let time=data.time;
let keyValue=data.value;
var html ="<p>"+"时间:"+time+"</p>";
var html2 ="<p>"+"值:"+keyValue+"</p>";
showDiv.innerHTML = html+html2
},
leave($event){
var showDiv = document.getElementById('mouse')
showDiv.style.display = 'none'
showDiv.innerHTML = ''
}
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。