安装clipboard : npm install clipboard --save
在模板文件中引入: import Clipboard from “clipboard”
具体使用: (这里我用的表格)
<el-table :data="gridData" border>
<el-table-column
prop="documentPath"
property="date"
label="文件位置"
width="600"
></el-table-column>
<el-table-column property="name" label="操作">
<template slot-scope="scope">
<div>
<el-button
type="success"
size="mini"
class="copy-qb"
@click="copyQbUrl(scope.row.documentPath)"
>复制链接</el-button
>
</div>
</template>
</el-table-column>
</el-table>
// 首先请求后台接口,拿到数据赋值给gridData
// 调用的方法
copyQbUrl(url) {
let clipboard = new Clipboard('.copy-qb', {
text: () => {
return url
}
})
clipboard.on('success', () => {
this.$message.success('复制成功!')
clipboard.destroy()
})
clipboard.on('error', () => {
this.$message.error('该浏览器不支持自动复制,请手动复制!')
clipboard.destroy()
})
}