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

第一种用原生实现

<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('复制失败!')
      })
    },
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐