分别使用vue和Android实现长按券码复制功能

 

  

   

    
    券码:{{couponItem.codeNo}}
   
  
 

data: function() {
 return {
  couponArray: [],
  showPopBubble: false,
  x: 0,
  y: 0,
  clickedIndex: 0
 }
}

.coupon-code-item {
 position: relative;
 padding: 10px 0;
 font-size: 13px;
}

.pop-bubble-copy {
 position: absolute;
 width: 73px;
 height: 39px;
}

.code-label {
 margin-left: 28px;
 margin-right: 26px;
 color: #989898;
}

.code-active {
 color: $color-ff5532;
}

methods: {
 closePopBubble() {
  if (this.showPopBubble) {
   this.showPopBubble = false;
  }
 },
 getPopBubble(e, index) {
  this.showPopBubble = true;
  this.clickedIndex = index;
  // 对x,y的计算结果进行微调
  this.x = e.target.offsetLeft + 30;
  this.y = e.target.offsetTop - 40;
 },
 copyToClipboard(e, text) {
  this.showPopBubble = false;
  var clipboard = new Clipboard(e.target, {text: () => text.replace(/\s/g, "")});
  clipboard.on('success', e => {
   // 释放内存
   clipboard.off('error');
   clipboard.off('success');
   clipboard.destroy();
  });
  clipboard.on('error', e => {
   // 释放内存
   clipboard.off('error');
   clipboard.off('success');
   clipboard.destroy();
  });
  clipboard.onClick(e);
 }
}

Vue.directive('tap',{
 bind:function(el,binding){
  var startTx, startTy,endTx,endTy,longClick,timeOutEvent,
  lOngMethod=binding.value.longMethod,
  method = binding.value.method,
  params = binding.value.params,
  propagation=binding.value.propagation;
  el.addEventListener("touchstart",function(e){
   var touch=e.touches[0];
   startTx = touch.clientX;
   startTy = touch.clientY;
   if(longMethod && typeof lOngMethod==='function'){
    lOngClick=0;
    timeOutEvent =setTimeout(function(){
    lOngClick=1;
    longMethod(e, params);
    },500)
   }
   if(!propagation){
    if (e.stopImmediatePropagation) {
    e.stopImmediatePropagation();
    } else {
     e.propagatiOnStopped= true;
    }
   }
  },false );
  el.addEventListener("touchmove",function(e){
   if(longMethod && timeOutEvent){
   clearTimeout(timeOutEvent);
   timeOutEvent = 0;
   }
  },false);
  el.addEventListener("touchend",function(e){
   var touch = e.changedTouches[0];
   endTx = touch.clientX;
   endTy = touch.clientY;
   if(longMethod && timeOutEvent){
    clearTimeout(timeOutEvent);
   }
   if((timeOutEvent!=0 && lOngClick==0)||!longMethod){
    if( Math.abs(startTx - endTx) <6 && Math.abs(startTy - endTy) <6){
    if(params instanceof Array){
     method(...params);
    }
    else method(params);
    }
    var focusInput=document.querySelector('input:focus');
    if(focusInput)focusInput.blur();
    var tagName=el.tagName.toLowerCase();
    if(tagName==='input'||tagName==='textarea')el.focus();//获取焦点
    if(!propagation){
    if (e.stopImmediatePropagation) {
     e.stopImmediatePropagation();
    } else {
     e.propagatiOnStopped= true;
    }
    e.stopPropagation();
    return false;
    }
   }
  },false);
 }
})