vue3 + ts 通过自定义指令实现可以自由拖动的盒子

本文主要记录 vue3 自定义指令的用法的一个案例,通过自定义指令实现一个盒子(类似弹窗)可以被鼠标在浏览器的可视区域内自由拖动

下面直接上代码:(注:代码使用了 vue3 + ts 的写法) 

 template

typeScript

style (less)

效果图:

vue3 + ts 通过自定义指令实现可以自由拖动的盒子_第1张图片

 特点:内部限制了盒子上下左右移动的范围最值,保证盒子只能在浏览器可视区域内移动。

你可能感兴趣的:(Vue,前端,vue)