如何将Vue自定义指令改写为长尾词，实现元素滑动移动端适配及边界处理？

本文共计2093个文字，预计阅读时间需要9分钟。

目录+效果演示+核心属性+实现思路+代码+注意+自定义指令+this指向问题+滑动后点击事件被触发+移动端滑动问题+效果演示+核心属性+Element.clientWidth：元素可视宽度。Element.clientHeight：元素可视高度。

目录

• 效果演示
• 核心属性
• 实现思路
• 代码
• 注意
• 自定义指令this指向问题
• 滑动后点击事件被触发
• 移动端滑动问题

效果演示

核心属性

Element.clientWidth：元素可视宽度。

Element.clientHeight：元素可视高度。

MouseEvent.clientX：鼠标相对于浏览器左上顶点的水平坐标。

MouseEvent.clientY：鼠标相对于浏览器左上顶点的垂直坐标。

Touch.clientX：触点相对于浏览器左上顶点的水平坐标（移动端属性）。

Touch.clientY：触点相对于浏览器左上顶点的垂直坐标（移动端属性）。