vue使用clipboard.js 《一键复制》

1. 安装

npm install clipboard --save

2. vue项目我们可以对其进行简单的处理
   我们可以在项目目录下utils(没有新建)新建一个 clipboard.js文件

import Clipboard from 'clipboard' //引入cliboard
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)
}

3. 在组件使用

<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>