js 复制功能,点击按钮实现复制功能

54 篇文章 3 订阅

方法一:pc端和手机端通用

<div class="my-invitation-num-data"><span id="copycode">{{inviteCode}}</span></div>
<van-button class="copy-btn" @click="handleCopy">复制</van-button>

用原生的document.execCommand(‘copy’)的方式实现,移动端(安卓,iOS兼容)和PC端都可以使用 

//方法一:用原生的document.execCommand(‘copy’)的方式实现,移动端和PC端都可以使用
//效果:点击复制按钮,复制想复制的区域,例如复制邀请码功能实现
handleCopy(){
	const range = document.createRange(); 创建range对象
	range.selectNode(document.getElementById('copycode')); //获取复制内容的 id 选择器
	const selection = window.getSelection();  //创建 selection对象
	if (selection.rangeCount > 0) selection.removeAllRanges(); //如果页面已经有选取了的话,会自动删除这个选区,没有选区的话,会把这个选取加入选区
	selection.addRange(range); //将range对象添加到selection选区当中,会高亮文本块
	document.execCommand('copy'); //复制选中的文字到剪贴板
	this.$toast('复制成功')
	selection.removeRange(range); // 移除选中的元素
}

方法二:pc端和手机端通用

 
<button @click='linkUrl(item)'>点击复制</button>
 
linkUrl(item){
	let url = item.url;//拿到想要复制的值
	let copyInput = document.createElement('input');//创建input元素
	document.body.appendChild(copyInput);//向页面底部追加输入框
	copyInput.setAttribute('value', url);//添加属性,将url赋值给input元素的value属性
	copyInput.select();//选择input元素
	document.execCommand("Copy");//执行复制命令
	this.$message.success("链接已复制!");//弹出提示信息,不同组件可能存在写法不同
	//复制之后再删除元素,否则无法成功赋值
	copyInput.remove();//删除动态创建的节点
}

方法三:使用第三方实现  clipboard.js

使用第三方框架clipboard的方式实现,移动端默认浏览器不兼容,PC端可以使用

handleCopy(){
    navigator.clipboard.writeText(this.inviteCode).then(() => {
        this.$toast('复制成功')
    })
}


参考一

js如何实现复制功能_Gardenia_lan的博客-CSDN博客_js如何实现复制方法一:用原生的document.execCommand(‘copy’)的方式实现,移动端(安卓,iOS兼容)和PC端都可以使用方法二:使用第三方框架clipboard的方式实现,移动端默认浏览器不兼容,PC端可以使用PS:如有错误,请多指教~https://blog.csdn.net/m0_57278611/article/details/124822123

参考二

js 实现复制_Hello闰土的博客-CSDN博客_js 复制<button @click='linkUrl(item)'>点击复制</button>linkUrl(item){let url = item.url;//拿到想要复制的值let copyInput = document.createElement('input');//创建input元素document.body.appendChild(copyInput);//向页面底部追加输入框copyInput.setAttribute('value', url);..https://blog.csdn.net/runtu999/article/details/124411002

参考三

https://www.jb51.net/article/201421.htmicon-default.png?t=M4ADhttps://www.jb51.net/article/201421.htm

  • 12
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

橙-极纪元JJY.Cheng

客官,1分钱也是爱,给个赏钱吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值