美文网首页
vue 全局自定义指令注册

vue 全局自定义指令注册

作者: 前端陈陈陈 | 来源:发表于2021-03-22 09:56 被阅读0次

    1、main.js 全局注册:

    Vue.directive('throttle', {
      // 添加指令用于对点击事件节流
      bind: function(el, binding) {
        let time = binding.value || 1000;
        let preTime = new Date().getTime();
        el.addEventListener('touchstart', e => {
          const nowTime = new Date().getTime();
          if (preTime && nowTime - preTime < time) {
            e.preventDefault();
            e.stopImmediatePropagation();
          } else {
            preTime = nowTime;
          }
        });
      }
    });
    

    2、使用:

       <div v-throttle @click="selBoxClick(item.type, item.name, index)" class="dropdown">
                    <input
                      unselectable="on"
                      onfocus="this.blur()"
                      class="t1"
                      type="text"
                      placeholder="请选择"
                      v-model="selData[item.type].value"
                      readonly
                    />
                  </div>
    

    3、

    // 解决ios下css: active伪类无效果问题
    document.addEventListener('touchstart', function() {}, { passive: false });
    

    相关文章

      网友评论

          本文标题:vue 全局自定义指令注册

          本文链接:https://www.haomeiwen.com/subject/ezxzcltx.html