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

 更新时间:2019年10月14日 14:35:46   作者:Sherry慈   我要评论
最近分别用vue和Android实现了一个券码复制功能,长按券码会在上方弹出一个拷贝的icon提示,点击icon将券码内容复制到剪贴板。下面小编给大家带来实现代码,需要的朋友参考下吧

最近分别用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="http://www.jb51.net/article/171911.htm/../../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切了一张气泡弹窗的显示图,如果感兴趣也可以用代码手动绘制

总结

以上所述是小编给大家介绍的分别使用vue和Android实现长按券码复制功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对澳门金沙网上娱乐网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • 微信小程序(微信应用号)开发工具0.9版安装详细教程

    微信小程序(微信应用号)开发工具0.9版安装详细教程

    这篇文章主要介绍了微信小程序(微信应用号)开发工具0.9版安装详细教程的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • CSDN 博客的代码高亮问题自己修复

    CSDN 博客的代码高亮问题自己修复

    这几天 CSDN 博客的代码高亮功能突然不行了,而且论坛上有人提出 BUG,没有得到回应。
    2009-05-05
  • HTTP状态代码集合 方便查询

    HTTP状态代码集合 方便查询

    HTTP协议是基于请求/响应范式的。一个客户机与服务器建立连接后,发送一个请求给服务器,请求方式的格式为,统一资源标识符、协议版本号,后边是MIME信息包括请求修饰符、客户机信息和可能的内容。
    2011-02-02
  • 程序员的新年祝福 Happy New Year

    程序员的新年祝福 Happy New Year

    再见,2017,你好,2018!祝大家在新的一年里,快快乐乐,编程技术更上一层楼,元旦快乐
    2018-01-01
  • 基于Token的身份验证之JWT基础教程

    基于Token的身份验证之JWT基础教程

    JWT(json web token)是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。下面这篇文章主要给大家介绍了关于基于Token的身份验证之JWT的基础相关资料,文中通过示例代码的非常详细,需要的朋友可以参考下
    2018-09-09
  • 全民学编程之 Hello World

    全民学编程之 Hello World

    Hello World的迷人之处在于:它是简单的,即便没有任何基础,你也可以轻松理解,但它又不是苍白的,它带有一个程序语言鲜明的特色,体现了该语言最基本的思想和特征。同样也是Hello World,让人体会到第一份成功的喜悦
    2014-01-01
  • aop的实现原理_动力节点Java学院整理

    aop的实现原理_动力节点Java学院整理

    这篇文章主要介绍了aop的实现原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • URL中斜杠/和反斜杠\的区别小结

    URL中斜杠/和反斜杠\的区别小结

    这篇文章主要介绍了URL中斜杠/和反斜杠\的区别小结,纯属个人总结,相对长篇大论较容易理解,需要的朋友可以参考下
    2014-07-07
  • windows开发记事本程序纪实(二)逻辑篇1

    windows开发记事本程序纪实(二)逻辑篇1

    从本节开始介绍windows开发实现记事本程序的逻辑实现部分。本节的主要内容有以下3点:1. 主窗口定义2. RichEdit控件的选用及初始化3. 整个程序ICON的选择
    2014-08-08
  • github pull最新代码实现方法

    github pull最新代码实现方法

    本文主要介绍 github pull最新代码的资料,这里对 github pull最新代码做了详细流程介绍,有需要的小伙伴可以参考下
    2016-09-09

最新评论