vue点击复制链接功能两种方法实现
今天在写需求的时候有个复制链接功能给实现下,有两种方式可实现第一种用原生实现<Buttontype="success" @click="copyLink(row.system)" size="small" >复制链接</Button>copyLink(val) { // 复制链接console.log(val, '复制链接')let url = val // 后台接口返回的
·
今天在写需求的时候有个复制链接功能给实现下,有两种方式可实现
第一种用原生实现
<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('复制失败!')
})
},
}
更多推荐
已为社区贡献11条内容
所有评论(0)