Vue clipboard使用
文章描述：
vue使用clipboard复制粘贴
安装
npm install clipboard --savevue
<template>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column label="操作" width="180">
<template v-slot="scope">
<el-button
type="success"
size="mini"
class="copy-qb"
@click="handleClick(scope.row.address)"
>复制地址</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
import Clipboard from 'clipboard'
export default {
data() {
return {
tableData: [{
date: '2020-05-01',
name: '小坏蛋',
address: '四川省成都市'
}, {
date: '2022-05-02',
name: '小兔崽子',
address: '四川省南充市'
}]
}
},
methods:{
// 调用的方法
handleClick(val) {
var clipboard = new Clipboard('.copy-qb',{
text: () => {
return val
}
})
clipboard.on('success', e => {
this.$message.success('已成功复制到粘贴板')
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
this.$message.warning('该浏览器不支持复制')
// 释放内存
clipboard.destroy()
})
}
}
}
</script>
发布时间：2023/06/09
发表评论