Vue2项目实现剪切板功能

需求说明

点击按钮将指定Dom元素的内容复制到剪切板中。

1、安装vue-clipboard2插件：

npm install --save vue-clipboard2

2、在 main.js 文件中注册vue-clipboard2插件：

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

在 Vue 文件组件中使用：

<template>
  <p @click="copyRegisterCode">{{ content }}</p>
</template>

<script>
export default {
  data() {
    content: 'Hello world'
  },
  methods: {
    copyRegisterCode() {
      this.$copyText(this.content)
          .then(e => {
          this.$toast('复制成功');
        }, function(e) {
          this.$toast.fail('复制失败，请手动复制！');
        }
      );
    }
  }
};
</script>