vue自定义tap指令

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
 6 <title>自定义tap指令</title>
 7 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 8 </head>
 9 <body>
10 <div id="app">
11   <button  v-tap="todo">按钮</button>
12 </div>
13 
14 <script>
15 /*封装tap*/
16     function tap(dom,callback){
17         /*
18          * 要求  没有触发 touchmove 事件
19          *       并且响应速度要比click快
20          */
21         if(dom && typeof  dom == 'object'){
22             var isMove = false;
23             var startTime = 0;
24             dom.addEventListener('touchstart',function(e){
25                 //console.log('touchstart');
26                 //console.time('tap');/*记录tap这个参数现在的时间*/
27                 startTime = Date.now();
28             });
29             dom.addEventListener('touchmove',function(e){
30                 //console.log('touchmove');
31                 isMove = true;
32             });
33             dom.addEventListener('touchend',function(e){
34                 //console.log('touchend');
35                 //console.timeEnd('tap')/*打印tap这个参数距离上一次记录的时候的时间*/
36                 /*判读  是否满足tap 的要求  一般要求tap的响应时间150*/
37                 if(!isMove && (Date.now()-startTime) < 150){
38                     /*调用 callback*/
39                     // callback && callback(e);
40                     callback.call(dom, e);
41                 }
42                 /*重置 参数*/
43                 isMove = false;
44                 startTime = 0;
45             });
46         }
47     }
48 Vue.directive('tap', {
49   bind: function (el, binding) {
50     tap(el, binding.value)
51   }
52 })
53 new Vue({
54   el: '#app',
55   methods: {
56     todo: function () {
57         console.log('todo');
58     }
59   }
60 })
61 </script>
62 </body>
63 </html>

 

转载于:https://www.cnblogs.com/handsome-jm/p/7560441.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue自定义指令失效的原因可能有很多种情况。根据引用和引用的内容,可以推测一些可能的原因和解决方法。 1. 指令未正确注册:在Vue中,自定义指令需要先进行注册,然后才能在模板中使用。请确保自定义指令已经正确地注册到Vue实例中。你可以使用全局注册或局部注册的方式进行注册。全局注册可以通过Vue.directive方法全局注册所有的指令,如引用所示。局部注册可以在组件内部使用directives选项进行指令的注册。 2. 指令名称不正确:请确保你在模板中正确地使用了自定义指令的名称。指令名称应该是以v-开头的,比如v-imgerror。 3. 指令绑定值错误:自定义指令可以通过绑定值来传递参数。请确保你正确地传入了绑定值,并且在指令定义中正确地使用了这些值。 4. 指令逻辑错误:自定义指令的逻辑代码可能有问题,导致指令无法正常工作。请检查指令的代码逻辑,确保代码没有错误。 5. 图片加载问题:自定义指令在处理图片加载问题时可能会出现失效的情况。请检查你的指令逻辑,确认图片加载错误时是否正确地触发了相关的处理逻辑。 总结来说,如果Vue自定义指令失效,首先要检查指令是否正确注册、名称是否正确、绑定值是否正确、代码逻辑是否正确,以及是否正确处理了图片加载问题。通过排查这些可能的原因,你应该能够找到并解决问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值