js 复制功能,点击按钮实现复制功能
js 复制功能,点击按钮实现复制功能
·
方法一: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('复制成功')
})
}
参考一
参考二
参考三
https://www.jb51.net/article/201421.htmhttps://www.jb51.net/article/201421.htm
更多推荐
所有评论(0)
您需要登录才能发言
查看更多评论