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

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

下面直接上代码：（注：代码使用了 vue3 + ts 的写法） 

 template

typeScript

style (less)

效果图：

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