<!-- 可以长按加减号自增和自减 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#app {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<button class="btn" @click="subtract()" @mousedown="startSubTimer()" @mouseup="endSubTimer()">-</button>
<input type="text" name="num" id="input" v-model="count">
<button class="btn" @click="add()" @mousedown="startAddTimer()" @mouseup="endAddTimer()">+</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: "#app",
data: {
count: 0,
timer: null,
timer2: null,
},
methods: {
// 加
add() {
this.count < 100 && this.count++
},
// 减
subtract() {
this.count > 0 && this.count--
},
autoAddStart() {
this.timer2 = setInterval(() => {
this.count++
}, 200);
},
autoSubStart() {
if (this.count <= 0) {
this.count = 0
this.timer2 = null
} else {
this.timer2 = setInterval(() => {
if (this.count <= 0) {
this.count = 0
} else {
this.count--
}
}, 200);
}
},
autoAddEnd() {
clearTimeout(this.timer2)
this.timer2 = null;
},
autoSubEnd() {
clearTimeout(this.timer2)
this.timer2 = null;
},
// 鼠标按下减
startSubTimer() {
this.timer = setTimeout(() => {
this.autoSubStart()
}, 1000);
},
// 鼠标抬起减
endSubTimer() {
clearTimeout(this.timer)
this.timer = null;
this.autoSubEnd()
},
// 鼠标按下加
startAddTimer() {
this.timer = setTimeout(() => {
this.autoAddStart()
}, 1000);
},
// 鼠标抬起减
endAddTimer() {
clearTimeout(this.timer)
this.timer = null;
this.autoAddEnd()
}
}
})
</script>
</html>
Vue实现可以长按加/减号自增和自减的输入框
最新推荐文章于 2024-03-12 19:11:32 发布