vue 复制功能实现方案

vue复制功能

clipboard官方网址：clipboardjs.com/

1. npm 或 yarn 安装

npm install clipboard --save

2. 导入 clipboard

import Clipboard from 'clipboard

3. 示例1

<-- 指定内容 -->
<button class="btn" data-clipboard-text="复制内容" @click="copy">复制</button>

//动态内容实现复制
 <el-button type="primary" class="copy-btn" :data-clipboard-text="copyContent" @click="copyData">复制</el-button>
 const copyData = (copyContent，clickEvent) => {
    const clipboard = new Clipboard(clickEvent.target, {
        text: () => copyContent
    })
    
     clipboard.on('success', () => {
         console.log('复制成功')
         //清除选中
         e.clearSelection()
         //销毁
         clipboard.destroy()
     }
     clipboard.on('error', () => { 
         console.log('不支持复制功能') 
         e.clearSelection() 
         clipboard.destroy() 
     })
 }

4. 示例2

<-- 
<el-input id="input"></el-input>

<el-button type="primary" 
    class="btn" 
    @click="copyText" 
    data-clipboard-action="copy"
    data-clipboard-target="#input"
    >
    复制
</el-button>

     copyText() {
                    
         //let clipboard = new Clipboard('.btn'）//同以下方式选其一
		let clipboard = new Clipboard('.btn', () => {
			container: document.getElementById('#input')
		})
		clipboard.on('success', (e) => {
                  console.log('复制成功')
                   //清除选中
                    e.clearSelection()
                   //销毁
		        clipboard.destroy()
		})

		clipboard.on('error', () => {
			console.log('不支持复制功能')
                            e.clearSelection()
			clipboard.destroy()
		})
	}
            

5. 踩坑日志

在dialog中使用出现不生效无效的问题，解决方法如下：

 dialog组件使用 append-to-body 自身插入至 body 元素上
 更改获取方式 document获取方式更改为ref

6. 已弃用--execCommand

const copy = (data) => {
    let url = data 
    let input = document.createElement('textarea') 
    input.value = url document.body.appendChild(oInput) 
    input.select() // inpurt和area有select方法; 
    document.execCommand('Copy') // 执行浏览器复制命令 
    console.log('复制成功') 
    input.remove()  //移除
}

6. navigator.clipboard方法

//注意：仅安全域下使用
navigator.clipboard.writeText('复制内容').then(() => {
    console.log('复制成功')
}).catch((error) => {
    console.log('复制失败')
})