Vue3中update问题解决

vue实现键盘漂浮框疗效

本文为你们分享了vue实现键盘漂浮框疗效的具体代码，供你们参考。

疗效：

html：

鼠标触碰元素

 

悬浮框

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座标。

以上就是本文的全部内容，希望对你们的学习有所帮助，也希望你们多多支持编程宝库。

下一节：vue3中update:modelValue的使用与不生效问题解决JS编程技术

v-model中update:modelValuev-model的主要缘由是因为value和input风波可能另有它用，这么我们可不可以直接使用另外的属性和技巧...