鼠标跟随相信大家都很熟悉了，在这里我的随笔呢说的是怎么在vue中使用鼠标跟随，onmousedown，onmousemove 这些事件是原生事件，按理说vue使用是没有问题的，况且pc大部分事件是可以在移动端使用的，但是在vue项目中使用它却不生效，没有效果。
然后百度查询vue事件，了解到vue已经规定了移动端wap使用的事件，touchstart，touchmove等，这样往下开展工作就容易多了！直接上实例吧
样式：
#box {
width: 100px;
height: 100px;
// aquamarine;
position: fixed;
top: 200px;
right: 30px;
z-index: 999;
-webkit-app-region: no-drag;
}
img {
width: 100%;
height: 100%;
cursor: move;
}
#scale {
width: 10px;
height: 10px;
overflow: hidden;
cursor: se-resize;
position: absolute;
right: 0;
bottom: 0;
// background-color: rgb(122,191,238);
}
结构：
<div id="father">
<div id="box">
<img src="http://d.hiphotos.baidu.com/zhidao/pic/item/e61190ef76c6a7efd517f640fbfaaf51f3de66a6.jpg"/>
<div id="scale"></div>
</div>
</div>
methods：
mouseFollow (that) {
// box是装图片的容器,fa是图片移动缩放的范围,scale是控制缩放的小图标
var box = document.getElementById('box')
var fa = document.getElementById('father')
// var scale = document.getElementById('scale')
// 图片移动效果
box.addEventListener('touchstart', function (ev) {
document.getElementById('box').setAttribute('data-flag', false)
var firstTime = new Date().getTime()
var oEvent = ev
// 浏览器有一些图片的默认事件,这里要阻止
oEvent.preventDefault()
var disX = oEvent.touches[0].clientX - box.offsetLeft
var disY = oEvent.touches[0].clientY - box.offsetTop
fa.addEventListener('touchmove', function (ev) {
oEvent = ev
oEvent.preventDefault()
var x = oEvent.touches[0].clientX - disX
var y = oEvent.touches[0].clientY - disY
// 图形移动的边界判断
x = x <= 0 ? 0 : x
x =
x >= fa.offsetWidth - box.offsetWidth
? fa.offsetWidth - box.offsetWidth
: x
y = y <= 95 ? 95 : y
y =
y >=
(document.documentElement.clientHeight ||
document.body.clientHeight) -
(box.clientHeight + 10)
? (document.documentElement.clientHeight ||
document.body.clientHeight) -
(box.clientHeight + 10)
: y
// 图片的新定位
box.style.left = x + 'px'
box.style.top = y + 'px'
})
// 图形移出父盒子取消移动事件,防止移动过快触发鼠标移出事件,导致鼠标弹起事件失效
fa.onmouseleave = function () {
fa.addEventListener('touchmove', null)
fa.onmouseup = null
}
// 鼠标弹起后停止移动
fa.addEventListener('touchend', function () {
var lastTime = new Date().getTime()
if ((lastTime - firstTime) < 200) {
that.$router.push({path: '/drugstore/addcar'})
document.getElementById('box').setAttribute('data-flag', true)
return false
}
fa.addEventListener('touchmove', null)
fa.onmouseup = null
})
})
}
mounted：
var that = this
this.mouseFollow(that)
