Vue3+vueuse实现放大镜示例详解

目录

• 前言
• 准备工作
• 功能实现
• 完整实现代码
• 结束语

前言

给大家带来一种潮流的方式，实现放大镜效果,安排

准备工作

下包:

yarn add @vueuse/core或
npm i @vueuse/core或

放大镜基本的结构

功能实现

使用@vueuse/core里面的useMouseInElement方法更多请前往vueuse官网了解>

看看效果使用useMouseInElement方法的效果是不是很奈斯 精彩还在后面⬇️⬇️⬇️

`` 移动遮罩

import {useMouseInElement} from '@vueuse/core'
import { computed } from '@vue/reactivity';
const {isOutside,elementX,elementY} = useMouseInElement(target)
const position = computed(()=>{
  let x = elementX.value -100 // -100 让光标处再中间
  let y = elementY.value -100
   // 边界处理
  x = x<0 ? 0 : x
  y = y<0 ? 0 : y
  x = x>200 ? 200 : x
  y = y>200 ? 200 : y
  return {
    x,
    y 
  }
})
 

看看效果吧 最后一步来啦⬇️⬇️⬇️

移动遮罩大图跟着移动

瞧瞧完成效果

完整实现代码

结束语

以上就是Vue3+vueuse实现放大镜的详细内容，更多关于Vue3 vueuse放大镜的资料请关注脚本之家其它相关文章！