vue的移动app项目中,自定义拖拽指令的问题


使用vue的都知道vue有一个自定义指令,我比较喜欢的就是拖拽的自定义指令,感觉挺方便的!

 //组件内的拖拽指令
directives: {
    //组建内自定义指令
    drag: {
      // 指令的定义
      bind: function(el, value) {
        let oDiv = el; //当前元素
        let self = this; //上下文

        oDiv.ontouchstart = function(e) {
          //鼠标按下,计算当前元素距离可视区的距离
          let disX = e.touches[0].clientX - oDiv.offsetLeft;
          let disY = e.touches[0].clientY - oDiv.offsetTop;
          oDiv.style.zIndex = 3;
        
         
          document.ontouchmove = function(e) {
            //通过事件委托,计算移动的距离
            let l = e.touches[0].clientX - disX;
            let t = e.touches[0].clientY - disY;
            //移动当前元素
            //   oDiv.style.left = l + 'px';
            
            
          document.ontouchend = function(e) {
            oDiv.style.zIndex = 2;
           
            }
            document.ontouchmove = null;
            document.ontouchend = null;
          };
        };
      }
    }
  }
//大致的框架就是这样其中el指的是绑定的元素,value就是传的值了,

  用法:

<div v-drag='{data:fills,info:data} '>拖拽</div>
<!--{}里面的全部都是传的参数,对应的就是上面的value-->

  上面是拖拽指令的写法及用法,但是这并不是主要内容,当你移动端使用自定义指令的时候,如果你的公司需要兼容各种手机版本以及各种系统版本,那么可能你就需要把他撤掉,我遇到的就是苹果5s并不支持,如果用自定义的指令,那么他会闪烁,没有内容,是白屏状态,所以说,想要用自定义指令的,要考虑考使用环境!


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM