VUE长按事件需求详解

2024-09-29 09:19:14

在开发中常常会有长按事件的需求，这里我简单的介绍几种长按事件的需求。

需求一：长按数字累加或者累减

HTML：

<div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>
   <button class="mui-btn mui-numbox-btn-minus" type="button"@touchstart="Loop_Sub(item.CartID)" @touchend="clearLoop()">-</button>
   <input class="mui-numbox-input" type="number" :value="item.Cart_Nums"/>
   <button class="mui-btn mui-numbox-btn-plus" type="button" @touchstart="Loop_Add(item.CartID)" @touchend="clearLoop()">+</button>
</div>

JS:

var vm = new Vue({
　　el: "#vue-container",
  data:{
　　　　Loop:null
　　},
　　methods:{//长按添加数量
　　　　Loop_Add:function(ID){
　　　　　　//设置数量
　　　　　　clearInterval(vm.Loop);//再次清空定时器，防止重复注册定时器
　　　　　　$target=$(event.target).parent().find('input');
　　　　　　vm.Loop=setInterval(function(){
　　　　　　$num=$target.val();
　　　　　　$target.val(parseInt($num)+1);
　　　　　　},100);
　　　　},
　　　　//长按减少数量
  　　Loop_Sub:function(ID){
　　　　　　//设置数量
　　　　　　clearInterval(vm.Loop);//再次清空定时器，防止重复注册定时器
　　　　　　$target=$(event.target).parent().find('input');
　　　　　　vm.Loop=setInterval(function(){
　　　　　　　　$num=$target.val();
　　　　　　　　if($num>0){
　　　　　　　　　　$target.val(parseInt($num)-1);
　　　　　　　　}else{
　　　　　　　　　　clearInterval(vm.Loop);
　　　　　　　　}
      　　//改变点击数
　　　　　　},100);
　　　　},
　　　　clearLoop:function(){
　　　　　　clearInterval(vm.Loop);
　　　　}
　　}
})

这个Demo是在移动端测试的，因此使用的是touch事件。方法很简单，touchstart的时候去注册个Interval定时器，touchend的时候再把定时器清除掉，这样就能实现长按持续累加或者累减的效果。

需求二：长按延时事件触发

这类需求也比较简单，和需求一类似。这里拿需求一举例，只需在touchstart添加setTimeout计时器延时事件执行，touchend清除计时器即可。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue.js实现按钮的动态绑定效果及实现代码

实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head> <title>按钮绑定</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte
vue组件中点击按钮后修改输入框的状态实例代码

最近写一个这样的页面要求点击修改按钮之后部分输入框由禁用状态变为可用状态.我使用了vue中的事件处理器,但是不知道怎么获取disabled这个属性的值,所以以失败告终.后来又使用了vue中的v-bind,使其与class或者style绑定,但是也没有作用 <el-input id = "usernames" v-model="form.username" v-bind:style = {"disabled:isDisabled"}>
VueJS 集成 Medium Editor的示例代码（自定义编辑器按钮）

0x00 前言 VueJS 社区里面关于富文本编辑器的集成也不少了,但是之前小调研了一下,基本上就是 quill,medium-editor,因为之前用 AngularJS 用过 medium-editor,并且需要自定义某些按钮,而且最好还是选中弹出式的,所以就决定用 medium-editor. 社区里面 star 较多的就是这个了:vue-medium-editor,但是打开它官网,看了看文档,越看越别扭,来看看它用法:  <medium-ed
使用vue实现点击按钮滑出面板的实现代码

在通信的时候容易出错,或者信息根本传不过来.那么这里就示例一下,怎么通过组件之间的通信完成点击事件. index.vue文件中: <div> <el-button type="primary" @click="onShow">点我</el-button> </div> 传递中介 <addForm :show="formShow" @onHide="formShow = false&q
VUE长按事件需求详解

在开发中常常会有长按事件的需求,这里我简单的介绍几种长按事件的需求. 需求一:长按数字累加或者累减 HTML: <div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'> <button class="mui-btn mui-numbox-btn-minus" type="button"@touchstart=&
vue鼠标悬停事件实例详解

具体代码如下所述: v-bind:title="message" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue实例化</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dis
vue全屏事件开发详解

本文实例为大家分享了vue全屏事件开发的具体代码,供大家参考,具体内容如下在项目中有需求相应浏览器全屏,写了个案例代码先看看效果吧全屏显示: html代码:  <div class="btn-fullscreen" @click="handleFullScreen"> <el-tooltip effect="dark" :content="fullscr
Vue方法与事件处理器详解

本文实例为大家分享了Vue方法与事件处理器的使用,供大家参考,具体内容如下按键修饰符在监听键盘事件时,我们经常需要检测 keyCode.Vue.js 允许为 v-on 添加按键修饰符:  <input v-on:keyup.13="submit"> 记住所有的 keyCode 比较困难,Vue.js 为最常用的按键提供别名:  <inpu
Vue在echarts tooltip中添加点击事件案例详解

目录需求解决方法 1.设置tooltip 2.定义hookToolTip变量 3.在methods中添加方法 4.完整代码需求需要在echarts tooltip点击学校的名称,跳转到详情页面:项目是从上海市---> 某个区----> 具体的学校(在最后一级的tooltip中绑定一个点击事件) 项目是用vue和echarts实现的,echarts是新版本(^5.0.2),并不能把点击事件绑定在window上解决方法 1.设置tooltip enterable: true, //允许
基于vue 兄弟组件之间事件触发(详解)

直奔主题! 兄弟组件之间的事件触发,大概思路是通过父级组件交换数据,watch来监听触发事件. 场景是父级组件A同时引用两个子级组件B,C.点击B组件中的按钮执行C组件中的事件. 第一步:父级组件A <bottom-play :play="playStatus" @playStatus="btmChild"></bottom-play> methods:{ listChild:function(val){//B组件自定义事件状态是布尔值 t
Vue 可拖拽组件Vue Smooth DnD的使用详解

目录简介和 Demo 展示 API: Container 属性生命周期回调事件 API: Draggable 实战简介和 Demo 展示最近需要有个拖拽列表的需求,发现一个简单好用的 Vue 可拖拽组件.安利一下~ Vue Smooth DnD 是一个快速.轻量级的拖放.可排序的 Vue.js 库,封装了 smooth-dnd 库. Vue Smooth DnD 主要包含了两个组件,Container 和 Draggable,Container 包含可拖动的元素或组件,它的每一个子元
bing Map 在vue项目中的使用详解

写在最前面拥有全球数据库国内好像就只有百度地图有,高德.搜狗.腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap. bing Map 使用教程(基础) 参考文档:bing Map 官方教程 bing Map 初始化引入bing map资源 <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&k
关于vue中 $emit的用法详解

1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&
vue 注册组件的使用详解

一.介绍组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树那么什么是组件呢? 组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 二.如何注册组件 Vue.js的组件的使用有3个步骤:创建组件构造器.注册组件和使用组件. 下面用代码演示这三步 <!DOCTYPE html> <html> <body> <div id=&q

VUE长按事件需求详解

相关推荐

随机推荐