在vue中,使用长按复制文字需要用到两个方法:
touchstart.手指放上去的动作
touchend.手指离开的动作
监听两个方法的间隔时间则可以达到长按触发的效果。
<span @touchstart="start" @touchend="end">长按复制“{{ clubname }}”</span>
data() {
return {
Loop:'', // 定时器
}
},
methods: {
start () {
clearTimeout(this.Loop); //再次清空定时器,防止重复注册定时器
this.Loop = setTimeout(() => {
this.copyText(this.clubname)
}, 1000);//1000也可以改成自己所需要长按的时间
},
end () {
clearTimeout(this.Loop); //清空定时器,防止重复注册定时器
},
copyText(context) {
// 创建输入框元素
let oInput = document.createElement('input');
// 将想要复制的值
oInput.value = context;
// 页面底部追加输入框
document.body.appendChild(oInput);
// 选中输入框
oInput.select();
// 执行浏览器复制命令
document.execCommand('Copy');
// 弹出复制成功信息
Toast('复制成功');//使用的vant组件(import {Toast} from 'vant')
// 复制后移除输入框
oInput.remove();
},
}