vue-cli实现复制内容到剪贴板

前言

这次的需求实现是依赖于第三方插件vue-clipboard2,直接上使用方法吧。

step 一，安装插件

npm install vue-clipboard2 --save

step 二，全局注入插件在main.js中

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

step 三，在需要使用的页面内

      <div class="Invitation_code code_link">
        <div class="code_left">邀请链接:</div>
        <div class="code_center" v-html="copy_link"></div>
        <el-button
          type="primary"
          size="small"
          plain
          v-clipboard:copy="copy_link"
          v-clipboard:success="copy_success"
          v-clipboard:error="copy_error"
          >复制</el-button
        >
      </div>
<script>
export default {
  data() {
    return {
      copy_link: "http://admin.express.iguoxiaodi.com",
  },
  methods: {
    // 复制成功时的回调函数
    copy_success(e) {
      this.$message.success("内容已复制到剪切板！");
    },
    // 复制失败时的回调函数
    copy_error(e) {
      this.$message.error("抱歉，复制失败！");
    },
  },
};
</script>

结束语

这样就可以正常使用了，多多笔记，多多学习。