vue自定义指令实现长按功能
Vue 实现 功能 自定义 指令
2023-06-13 09:17:20 时间
最近在做一个仿微信的实时通讯工具,前端用vue和有赞vant开发的h5应用。
最近加了一个新的需求,要求有消息的撤回功能,长按自己发送的消息,弹出撤销框,点击撤销框可以撤销自己发送的消息。
这个移动端的长按功能vue并没有原生支持,而是需要组合touchstart和touchend两个事件一起才能完成。
具体原理就是手指按下的时候触发定时器,当手指抬起的时候关闭定时器。在一定的时间内(800毫秒)如果没有抬起则认为是长按需要触发长按操作逻辑。
这里不仅需要两个事件。而且还需要引入额外的变量,也就是定时器。这些都是与业务无关的,如果代码写在业务组件里面,虽然也可以实现,但是代码看着不够简洁。
这里我们可以利用vue提供的自定义指令的能力,自己定义一个longpress的指令,并在bind函数中绑定touchstart和touchend事件,把定时器的逻辑写在bind函数中。至于具体的长按逻辑则由外部传递进来,通过bind函数的入参拿到。
最后需要长按指令的组件我们可以使用v-longpress="myfunc"来方便的使用起来
相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- 实现简单前后端完全分离增删改查:node.js+mysql+vue
- SpringBoot+Vue 前后端分离实现单点登录方案
- Vue.js - 使用Vue实现简简单单的分页功能
- Vue里如何实现excel转json的功能「建议收藏」
- 基于VUE + Echarts 实现可视化数据大屏展示效果[通俗易懂]
- vue 实现tab切换
- Vue 跨域配置「建议收藏」
- Vue笔记(10) vue-router
- axios实现跨域三种方法_vue跨域配置
- 前端面试选择题_vue最新面试题
- vueaxios跨域请求_vue如何实现跨域
- scrollwidth和clientwidth_vue监听页面滚动
- 20 多个好用的 Vue 组件库
- 我都学会Vue了,还不行吗?前端的水还得要多深
- vue的双向绑定原理_vue的双向绑定原理及实现
- vue分页列表
- 介绍|三大前端框架之Vue
- 5分钟!Vue 快速实现 GitHub 用户搜索功能
- Vue前后端页面下载功能实现演示,Python+flask提供后台下载服务
- Vue 指令之插值 v-text、v-html、v-once
- vue.js入门篇之Vue.js 样式绑定
- Vue取消eslint语法限制
- vue实现弹出框后光标自动定位到输入框Input详解程序员
- 使用Vue技术从MSSQL中获取数据(vue获取mssql数据)
- Vue接入Redis拓展应用的可能性(vue调redis)
- 用Vue从Redis中获取强有力的数据(vue用redis中数据)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- 构建基于Vue与Redis的高性能缓存系统(VUE redis缓存)