vue项目中实现复制内容到剪贴板

安装

npm install --save vue-clipboard2

main.js中引入

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

html

      <el-table-column label="操作">
        <template v-slot="scope">
          <span class="cursor" @click.stop="onCopy(scope.row)">复制</span>
          <span class="cursor" @click.stop="showSend">发送至</span>
        </template>
      </el-table-column>

js（复制函数）

  onCopy(row) {
    this.$copyText(
      `用户登录名称：${row.username}\n显示名称：${row.name}\n密码：${row.password}\naccessKeyId：${row.accessKeyId}\naccessKeySecret：${row.accessKeySecret}`
    ).then(this.$message.success('复制成功'));
  },
  

呈现效果