vue中使用vue-clipboard2实现文字复制到剪贴板

背景

在项目中我们有时候需要实现文字复制到用户剪贴板的功能，供用户粘贴或者存储，比如，银行卡号等私密信息展示不能完整的展示，前端会在银行卡号等私密信息中，只展示一部分，另一部分用 “ *** ”代替，（如银行卡号前端是展示6916 4008 ** **** **1782），而要实现复制真实银行卡号到剪贴板，去支付宝，微信进行绑卡操作的功能，这就可以利用 vue-clipboard2 实现vue项目的复制功能

安装vue-clipboard2

npm i vue-clipboard2 -S

main.js中引入

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';
import VueClipboard from 'vue-clipboard2'; // 引入vue-clipboard2

Vue.use(VueClipboard);

window.vm = new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
});

组件中使用vue-clipboard2

<template>
  <div
    class="btn"
    v-clipboard:copy="eacctNo"
    v-clipboard:success="onCopy"
    v-clipboard:error="onCopyError"
  >
    复制卡号并绑定微信支付宝
  </div>
</template>

<script>

export default {
  name: 'Copy',
  data() {
    return {
      eacctNo: '', // 要复制的文字
    };
  },
  methods: {
    // 复制成功
    onCopy() {
      this.copySuccess = true;
      setTimeout(() => {
        this.copySuccess = false;
      }, 2000);
    },
    // 复制失败
    onCopyError() {
      this.$bus.$emit('showPopup', {
        name: 'tip',
        data: '卡号复制失败，请手动保存',
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>