Vue 可拖拽的组件

好久没更新了,最近写了一个小的拖拽组件,分享一下
场景:h5项目上要有一个联系客服或查看相关问题的模块,一般定位在页面的左侧或右侧,可当页面滑动时,可能会遮罩页面内容,所有就做成可拖拽的。

写起来很简单,使用 touchstart touchmove touchend 三个时间

  • touchstart: 主要做一些例如 禁止滚动,防止滚动冲突
  • touchmove: 当手指滚动时,使目标元素(也就是组件)跟随手指的滚动进行移动
  • touchend: 用于手指移开,判断组件是回到左边还是右边。

我里的组件 props isOnlyLeft 意思是:只能在屏幕的左半边移动,isOnlyRight 只在屏幕右半边移动





你可能感兴趣的:(Vue 可拖拽的组件)