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