乘风原创程序

  • vue实现鼠标悬浮框效果
  • 2022/3/31 10:42:45
  • 本文实例为大家分享了vue实现鼠标悬浮框效果的具体代码,供大家参考,具体内容如下

    效果:

    html:

    <div
    ? @mouseenter="enter"?
    ? @mouseleave="leave"?
    ? @mousemove="move"
    >
    鼠标触碰元素
    </div>
    ?
    <div v-show="popupshow" class="hover_con" :style="positionstyle">
    悬浮框
    </div>

    js:

    export default {
    ? ? name: '',
    ? ? data() {
    ? ? ? return {
    ? ? ? ? popupshow:false,
    ? ? ? ? positionstyle:{top:'0px',left:'0px'}
    ? ? ? }
    ? ? },
    ? ? methods: {
    ? ? ? enter() {
    ? ? ? ? this.popupshow = true
    ? ? ? },
    ? ? ? leave() {
    ? ? ? ? this.popupshow = false
    ? ? ? },
    ? ? ? move(event) {
    ? ? ? ? const x = event.pagex + 15 + 'px'
    ? ? ? ? const y = event.pagey + 10 + 'px'
    ? ? ? ? this.positionstyle = { top: y, left: x } ?
    ? ? ? }
    ? ? }
    }

    css:

    .hover_con{
    ? position: fixed;
    ? max-width: 220px;
    ? padding: 10px;
    ? border: 1px solid #666;
    ? background: #ccc;
    }

    关于offsetx、offsety、clientx、clienty、pagex、pagey、screenx、screeny的区别

    offsetx、offsety: 鼠标相对于事件源元素(srcelement)的x,y坐标

    clientx、clienty: 鼠标相对于浏览器窗口可视区域的x,y坐标(窗口坐标),可视区域不包括工具栏和滚动条。

    pagex、pagey: 类似于event.clientx、event.clienty,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。ie事件中没 有这2个属性

    screenx、screeny: 鼠标相对于用户显示器屏幕左上角的x,y坐标。