1.安装
npm install --save clipboard
2.页面引用
import Clipboard from 'clipboard'
3.页面运用
html的运用
- 根据data-clipboard-text运用
data-clipboard-text 需要复制的文字,可以同时写几个复制内容在页面上
<span class="detailAdress" style="word-break:break-all;">
<em class="copy clipboard" data-clipboard-text="复制内容1" @click="clipCopyText">复制</em>
</span>
<span class="detailAdress" style="word-break:break-all;"><br/>
<em class="copy clipboard" data-clipboard-text="复制内容2" @click="clipCopyText">复制</em>
</span>
复制代码
- 根据data-clipboard-target运用
target必须是input,复制的是input里面的value值
//html
<div>
<!-- target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<button class="clipboard" data-clipboard-target="#foo" @click="clipCopyText"> Copy to clipboard</button>
</div>
//js复制链接,这里跟
clipCopyText() {
let clipboard = new Clipboard('#btn')
clipboard.on('success', e => {
console.log('复制成功')
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
console.log('该浏览器不支持自动复制')
// 释放内存
clipboard.destroy()
})
},
复制代码
js方法
//页面上是id,也可以是 let clipboard = new Clipboard('#clipboard')
//js复制链接
clipCopyText(){
let clipboard = new Clipboard('.clipboard')
clipboard.on('success', e => {
console.log('复制成功')
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
console.log('该浏览器不支持自动复制')
// 释放内存
clipboard.destroy()
})
},
复制代码