Vue实现组件——可以长按加/减号自增和自减的输入框

用vue实现一个可以长按加号/减号进行自增减的输入框：
思路：鼠标按下的时候启动一个定时器，控制值进行自增或者自减。当鼠标抬起的时候再取消这个定时器。

<!-- 可以长按加减号自增和自减 -->
<!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><script src="./code/lib/vue-2.4.0.js"></script><style>#app {display: flex;justify-content: center;}#input {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>var vm = new Vue({el: "#app",data: {count: 0,timer: null,timer2: null,},methods: {add: function () {this.count++},subtract: function () {if (this.count <= 0) {this.count = 0;} else {this.count--;}},autoAddStart: function () {console.log(this.count)this.timer2 = setInterval(() => {this.count++}, 200);console.log("autoAddStart")},autoSubStart: function () {if (this.count <= 0) {this.count = 0this.timer2 = null} else {this.timer2 = setInterval(() => {if(this.count <= 0){this.count = 0}else {this.count--}}, 200);}},autoAddEnd: function () {clearTimeout(this.timer2)this.timer2 = null;},autoSubEnd: function(){clearTimeout(this.timer2)this.timer2 = null;},startSubTimer: function () {this.timer = setTimeout(() => {this.autoSubStart()}, 1000);console.log("mouseDown")},endSubTimer: function () {clearTimeout(this.timer)this.timer = null;this.autoSubEnd()console.log("mouseup")},startAddTimer: function () {this.timer = setTimeout(() => {console.log(this)this.autoAddStart()}, 1000);},endAddTimer: function () {clearTimeout(this.timer)this.timer = null;this.autoAddEnd()}}})
</script></html>

Vue实现组件——可以长按加/减号自增和自减的输入框相关推荐

【Vue.js】Vue.js组件库Element中的单选框、多选框、输入框和计数器
1.Radio 单选框基础用法由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器. 要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Rad ...
vue 动态组件名_vue动态加载组件mounted无法获取dom的解决思路
有时我们在mouted方法中想通过id读取到一个dom元素,虽然官方并不推荐这种方法来操作dom.但难免有碰到这种情况,如下面一个dom元素试图在mouted中获取试图在nextick中获取结 ...
VUE2.0 饿了么学习笔记（10）加减号组件cartcontrol
创建cartcontrol组件,组件关联到food的相关属性,价格,数量等,所以组件要props父组件goods传过来的food数据 export default {//父组件传过来的,接收一个pro ...
Vue.js实战——封装长按能量条火箭发射动画组件_17
一.目标按照项目需求,需要完成如下几部分的功能: 1.长按屏幕时,显示能量条动画(类似环形进度条): 2.当能量条充满时,发射小火箭: 二.实现效果三.步骤按照需求分析,上述目标可以拆解成3个功 ...
Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载目录异步组件异步组件介绍异步组件声明高级异步组件路由懒加载路由懒加载介绍路由懒加载方法把组件按组分块异步组件异步组件介绍在开发大型 ...
vue 根据组件地址动态加载异步组件
要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件目录结构 index.html components/component1 components/ ...
vue 父组件重新加载子组件
vue 父组件重新加载子组件通过给子组件添加key或者v-if 重新加载子组件: html: <button @click="update">更新</butt ...
269_长按加号减号快速加减
长按加号减号快速加减 //减号长按的话就快速加减 tv_jianhao.setOnTouchListener(new View.OnTouchListener() { ...
前端框架Vue：组件之间的通信、插槽的使用
Vue组件与插槽一.组件化开发思想组件化规范 Web Components 我们希望尽可能多的重用的代码自定义组件的方式不太容易(html,js ,css) 多次使用组件可能导致冲突二.组件注 ...

Vue实现组件——可以长按加/减号自增和自减的输入框

Vue实现组件——可以长按加/减号自增和自减的输入框相关推荐

最新文章

热门文章