<>今天在写需求的时候有个复制链接功能给实现下,有两种方式可实现

<>第一种用原生实现
<Button type="success" @click="copyLink(row.system)" size="small" >复制链接</Button
> copyLink(val) { // 复制链接 console.log(val, '复制链接') let url = val // 后台接口返回的链接地址
let inputNode = document.createElement('input') // 创建input inputNode.value = url
// 赋值给 input 值 document.body.appendChild(inputNode) // 插入进去 inputNode.select()
// 选择对象 document.execCommand('Copy') // 原生调用执行浏览器复制命令 inputNode.className =
'oInput' inputNode.style.display = 'none' // 隐藏 this.$message.success('复制成功') },
<>第二种方法用插件去实现vue-clipboard2

<>1. 安装插件:
cnpm install vue-clipboard2 --save
<>2. 在main.js里面引入:
import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) <Button type="
success" @click="copyLink(row.system)" size="small" >复制链接</Button> methods: {
copyLink(val) { // 复制链接 val 就是你需要复制的链接 this.$copyText(val).then(e => { this.
$Message.success('复制成功!') }, e => { this.$Message.error('复制失败!') }) }, }

技术
今日推荐
阅读数 171920
阅读数 112
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信