image.png
需求是实现上图，长按下方中国结，将文字由灰色变红色
<div class="bg-img">
<img src="../../static/images/nzhd/bg-grid@2x.png" class="grid" alt="" v-if="!isShow">
<img src="../../static/images/nzhd/bg-red@2x.png" class="grid" alt="" v-if="isShow">
<div id="red">
<img src="../../static/images/nzhd/bg-red@2x.png" alt="">
</div>
</div>
<div class="btn" v-if="!isShow" @touchstart="gotouchstart" @touchend="gotouchend"></div>
直接上代码
上面两个img标签是指灰色的文字图片和红色的文字图片。将红色图片绝对定位和灰色图片位置一样 盖在灰色文字上方、并将红色字体图片的宽度设为0
gotouchstart() {
let that = this
clearTimeout(timeOutEvent) //清除定时器
timeOutEvent = 0
var node1 = document.querySelector('#red')
node1.style.width = '14.21875rem'
timeOutEvent = setTimeout(function() {
//执行长按要执行的内容，
that.isShow = true
}, 3000) //这里设置定时
},
//手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
gotouchend() {
clearTimeout(timeOutEvent)
if (timeOutEvent !== 0) {
var node1 = document.querySelector('#red')
node1.style.width = '0px'
//这里写要执行的内容（尤如onclick事件）
}
},
如果长按3秒以上，则将红色文字图片的宽度设为和灰色一样大，并加个动画，中间取消长按，再将红色文字图片宽度设为0
css代码如下
.bg-img {
position: relative;
width: 14.21875rem;
height: 2.78125rem;
margin: 1.90625rem auto 0;
}
.grid {
width: 14.21875rem;
}
#red {
position: absolute;
width: 0px;
height: 2.78125rem;
top: 0;
left: 0;
overflow: hidden;
transition: all 3s;
}
#red img {
width: 14.21875rem;
}
