分别使用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切了一张气泡弹窗的显示图,如果感兴趣也可以用代码手动绘制

总结

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

(0)

相关推荐

  • Android仿QQ长按弹出删除复制框

    本文实例为大家分享了Android仿QQ长按删除弹出框的具体代码,供大家参考,具体内容如下 废话不说,先看一下效果图: 对于列表来说,如果想操作某个列表项,一般会采用长按弹出菜单的形式,默认的上下文菜单比较难看,而QQ的上下文菜单就人性化多了,整个菜单给用户一种气泡弹出的感觉,而且会显示在手指按下的位置,而技术实现我之前是使用popupWindow和RecyclerView实现的,上面一个RecyclerView,下面一个小箭头ImageView,但后来发现没有必要,而且可定制化也不高,还是使用

  • Android textview 实现长按自由选择复制功能的方法

    这里有一个大坑,我的viewGroup中有一个这个属性android:descendantFocusability="blocksDescendants" 开始没有注意到,试了好多方法都不行,后来才看到这个属性,顺便科普一下,这个属性有三个值~ beforeDescendants:viewgroup会优先其子类控件而获取到焦点 afterDescendants:viewgroup只有当其子类控件不需要获取焦点时才获取焦点 blocksDescendants:viewgroup会覆盖子类

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

    最近分别用vue和Android实现了一个券码复制功能,长按券码会在上方弹出一个拷贝的icon提示,点击icon将券码内容复制到剪贴板.现将一些经验代码分享给大家以供参考.废话不多说,先上效果图 vue实现: npm install clipboard --save <div class="coupon-count-container" @click="closePopBubble"> <ul> <li v-for="(cou

  • Android item长按删除功能

    这个可以在Adapter里面写 一般写完之后都会调用 public void removeItem(int pos){ this.mDatas.remove(pos); notifyItemRemoved(pos); } 可是这样写的话,删除多次,会乱套,没有刷新 所以改这样子写 public void removeItem(int pos){ this.mDatas.remove(pos); notifyItemRemoved(pos); if(pos != mDatas.size()){ /

  • Android实现长按back键退出应用程序的方法

    本文实例讲述了Android实现长按back键退出应用程序的方法.分享给大家供大家参考.具体分析如下: 最近在做一个Android上的应用,碰到一个问题就是如何实现长按back键退出应用程序.在网上查找了很多资料,发现几乎没有这样的实现,大部分在处理时是双击back键来退出应用程序.参考了一下双击back键退出应用程序的代码,网上主流的一种方法是下面这种方法,实现起来比较简单: @Override public boolean onKeyDown(int keyCode, KeyEvent ev

  • vue 获取视频时长的实例代码

    直接通过element-ui自带的上传组件结合js即可,代码如下: HTML: <el-upload class="upload-demo" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <button cl

  • Vue通过WebSocket建立长连接的实现代码

    使用场景: 在项目开发中,后端需要处理一连串的逻辑,或者等待第三方的数据返回来进行处理之后在返回给前端,可能时间会很长,而且前端也不知道后端什么时候能处理好(时间长的话会达到10分钟左右),如果采用普通的HTTP连接,前后端无法一直保持联系,麻烦的时候可能还需要采用轮询的机制,所以使用WebSocket连接效果还是比较好的. 使用时间: 在界面加载完之后,建上WebSocket连接,此时前端还可以发送普通的HTTP的请求,等到后端处理完之后,通过建立的WebSocket连接返给前端,前端根据返回

  • Android 实现长按弹出PopupMenu 菜单栏

    在Android中的SDK3.0版本以后加入了一个特殊的菜单效果,它可以在任何的View上显示,根据View的位置显示菜单效果. res/menu/menu.xml <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="

  • vue中js判断长时间不操作界面自动退出登录(推荐)

    需求说明,后台有做半个小时不请求接口的话返回标识退出登录,但是要请求接口才行,现在要实现前端用js判断半个小时不操作界面的话自动跳转到登录页面. 创建一个.js文件,在main.js引入此js(vue框架) 在登录成功的时候保存当前时间localStorage.setItem("lastTime",new Date().getTime()); 然后在点击的时候更新这个时间 var lastTime = new Date().getTime(); var currentTime = ne

  • Android实现长按圆环动画View效果的思路代码

    一.需求来源 最近想到一个需求,类似悦跑圈或者Keep的结束按钮动画 二.思路代码 该动画按钮的主要作用就是防止用户误操作,具体实现思路如下: 1.监听用户的触摸事件OnTouchListener,在ACTION_DOWN的时候,记录下xy坐标和触摸时间,同时start自定义View动画:在ACTION_MOVE的过程中,判断坐标差值的偏移量是否在一个可接受的范围内,是的话就保留当前动画,不是的话就清除按钮上绘制的path:在ACTION_UP的时候,再次记录下触摸时间,比较两个时间是否达到了长

  • Android实现长截屏功能

    本文实例为大家分享了Android实现长截屏功能的具体代码,供大家参考,具体内容如下 1.MainActivity public class MainActivity extends AppCompatActivity { ScrollView scrollView; String sdRoot = Environment.getExternalStorageDirectory().getPath(); @Override protected void onCreate(Bundle saved

随机推荐