![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5d1dc828c0cc131dc5265db5048a9be7.png)
- 安装
npm install clipboard --save
- vue项目我们可以对其进行简单的处理
我们可以在项目目录下utils(没有新建)新建一个 clipboard.js文件
import Clipboard from 'clipboard'
import { ElMessage } from 'element-plus'
function clipboardSuccess(msg) {
ElMessage.success(msg || '复制成功')
}
function clipboardError(msg) {
ElMessage.error(msg || '复制失败')
}
export default function handleClipboard(text, event, msg) {
const clipboard = new Clipboard(event.target, {
text: () => text,
})
clipboard.on('success', () => {
clipboardSuccess(msg)
clipboard.destroy()
})
clipboard.on('error', () => {
clipboardError(msg)
clipboard.destroy()
})
clipboard.onClick(event)
}
- 在组件使用
<template>
<div>
<div><el-button type="primary" @click="generate">一键生成</el-button></div>
<el-card style="margin: 10px 0">
<div>
<div class="conLeft">
<div class="name">RSA私钥:</div>
<div>
<el-button type="primary" plain @click="handleCopyPrivateKey(privateKey, $event)"
>复制</el-button
>
</div>
</div>
<div class="context">{{ privateKey }}</div>
</div>
</el-card>
<el-card>
<div>
<div class="conLeft">
<div class="name">RSA公钥:</div>
<div>
<el-button type="primary" plain @click="handleCopyPublicKey(publicKey, $event)"
>复制</el-button
>
</div>
</div>
<div class="context">{{ publicKey }}</div>
</div>
</el-card>
</div>
</template>
<script>
import { getRSAkey } from '@/api/configuration'
import clipboard from '@/utils/clipboard'
export default {
data() {
return {
privateKey: null,
publicKey: null,
}
},
methods: {
generate() {
getRSAkey().then((res) => {
if (res.code === 200) {
this.privateKey = res.data.private_key
this.publicKey = res.data.public_key
}
})
},
handleCopyPrivateKey(data, event) {
clipboard(data, event)
},
handleCopyPublicKey(data, event) {
clipboard(data, event)
},
},
}
</script>
<style lang="scss" scoped>
</style>