vue点击复制链接功能两种方法实现

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

<>第一种用原生实现
<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('复制失败！') }) }, }

• « 上一篇：51单片机（七）.单片机输入电路实践——按键键盘的使用
• » 下一篇：js 判断数组中是否有重复值两种方法