vue input 获取焦点_分别用vue和Android实现长按券码复制功能

最近分别用vue和Android实现了一个券码复制功能，长按券码会在上方弹出一个拷贝的icon提示，点击icon将券码内容复制到剪贴板。现将一些经验代码分享给大家以供参考。废话不多说，先上效果图

vue实现：

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;

// 对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);

}

}

实现原理是将气泡弹窗设置为绝对定位，根据券码的位置来计算气泡弹窗相对于父元素的位置，其中父元素为每一条item的包裹元素coupon-code-item

本次的实现难点是需要自己手动定义vue的长按点击事件：

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);

}

})

Android实现：

Android原生实现起来比较简单，直接贴代码

以上两种实现方法全部完成，为了简单直接让UI切了一张气泡弹窗的显示图，如果感兴趣也可以用代码手动绘制