主頁(yè) > 知識(shí)庫(kù) > 分別使用vue和Android實(shí)現(xiàn)長(zhǎng)按券碼復(fù)制功能

分別使用vue和Android實(shí)現(xiàn)長(zhǎng)按券碼復(fù)制功能

熱門(mén)標(biāo)簽:北京外呼系統(tǒng)咨詢電話 海南人工外呼系統(tǒng)哪家好 怎么去掉地圖標(biāo)注文字 地圖標(biāo)注資源分享注冊(cè) 廊坊地圖標(biāo)注申請(qǐng)入口 襄陽(yáng)外呼增值業(yè)務(wù)線路解決方案 合肥阿里辦理400電話號(hào) 慶陽(yáng)外呼系統(tǒng)定制開(kāi)發(fā) 高德地圖標(biāo)注公司位置需要錢(qián)嗎

最近分別用vue和Android實(shí)現(xiàn)了一個(gè)券碼復(fù)制功能,長(zhǎng)按券碼會(huì)在上方彈出一個(gè)拷貝的icon提示,點(diǎn)擊icon將券碼內(nèi)容復(fù)制到剪貼板?,F(xiàn)將一些經(jīng)驗(yàn)代碼分享給大家以供參考。廢話不多說(shuō),先上效果圖

vue實(shí)現(xiàn):

npm install clipboard --save

div class="coupon-count-container" @click="closePopBubble">
 ul>
  li v-for="(couponItem, index) in couponArray" :key="index">
   div class="coupon-code-item">
    img class="pop-bubble-copy" :style="{left: x + 'px', top: y + 'px', visibility: showPopBubble  index === clickedIndex ? 'visible' : 'hidden'}" src="../../assets/couponPayResult/copy_icon.png" @click="copyToClipboard($event, couponArray[clickedIndex].codeNo)">
    span class="code-label">券碼:/span>span class="code-active" v-tap="{longMethod: getPopBubble, params: index}">{{couponItem.codeNo}}/span>
   /div>
  /li>
 /ul>
/div>
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;
  // 對(duì)x,y的計(jì)算結(jié)果進(jìn)行微調(diào)
  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 => {
   // 釋放內(nèi)存
   clipboard.off('error');
   clipboard.off('success');
   clipboard.destroy();
  });
  clipboard.on('error', e => {
   // 釋放內(nèi)存
   clipboard.off('error');
   clipboard.off('success');
   clipboard.destroy();
  });
  clipboard.onClick(e);
 }
}

實(shí)現(xiàn)原理是將氣泡彈窗設(shè)置為絕對(duì)定位,根據(jù)券碼的位置來(lái)計(jì)算氣泡彈窗相對(duì)于父元素的位置,其中父元素為每一條item的包裹元素coupon-code-item

本次的實(shí)現(xiàn)難點(diǎn)是需要自己手動(dòng)定義vue的長(zhǎng)按點(diǎn)擊事件:

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();//獲取焦點(diǎn)
    if(!propagation){
    if (e.stopImmediatePropagation) {
     e.stopImmediatePropagation();
    } else {
     e.propagationStopped = true;
    }
    e.stopPropagation();
    return false;
    }
   }
  },false);
 }
})

Android實(shí)現(xiàn):

Android原生實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單,直接貼代碼

以上兩種實(shí)現(xiàn)方法全部完成,為了簡(jiǎn)單直接讓UI切了一張氣泡彈窗的顯示圖,如果感興趣也可以用代碼手動(dòng)繪制

總結(jié)

以上所述是小編給大家介紹的分別使用vue和Android實(shí)現(xiàn)長(zhǎng)按券碼復(fù)制功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

您可能感興趣的文章:
  • Android仿QQ長(zhǎng)按彈出刪除復(fù)制框
  • Android textview 實(shí)現(xiàn)長(zhǎng)按自由選擇復(fù)制功能的方法

標(biāo)簽:商丘 綿陽(yáng) 株洲 平頂山 哈密 臺(tái)州 鶴崗 鎮(zhèn)江

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《分別使用vue和Android實(shí)現(xiàn)長(zhǎng)按券碼復(fù)制功能》,本文關(guān)鍵詞  分別,使用,vue,和,Android,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《分別使用vue和Android實(shí)現(xiàn)長(zhǎng)按券碼復(fù)制功能》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于分別使用vue和Android實(shí)現(xiàn)長(zhǎng)按券碼復(fù)制功能的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章