点击复制文本(手写/插件)

手写

<template>
  <p @click="copy($event)">点击复制文本</p>
  <input v-model="copyText" ref="inputElement" class="hide"/>
</template>
<script>
export default {
  ...
  data() {
      return {
        copyText: ''
      }
  }
  methods: {
      copy(e) {
          this.copyText = e.target.innerHTML
         // 选中input框的内容
         this.$refs.inputElement.select();
         // 执行浏览器复制命令
         document.execCommand("Copy");
         // 提示已复制
         alert('已复制');
      }
  }
}
</script>
<style>
  .hide {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -10;
  }
</style>

注：知识点 - 隐藏元素但可以触发事件

/*
  方法一： display: none
          元素将不再占用页面空间，会引起浏览器的重排和重绘
          不会触发绑定事件
*/
.div {
    display: none
}
/*
  方法二： visibility: hidden
          元素仍然占用页面空间，只会重绘不会重排
          不会触发绑定事件
*/
.div {
    visibility: hidden
}
/*
  方法三： opacity: 0
          元素仍然占用页面空间，只会重绘不会重排
          会触发绑定事件
*/
.div {
    opacity: 0
}

插件：vue-clipboard2
文档地址：https://www.npmjs.com/package/vue-clipboard2

// 安装
npm install --save vue-clipboard2

// main.js引入
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

// 使用
<template>
  <i 
    class="iconfont icon-cloud-copy" 
    v-clipboard:copy="invitationCode" 
    v-clipboard:success="copy"
    v-clipboard:error="onError">
  </i>
</template>
<script>
export default {
  ...
  computed: {
      // 复制的文本
      invitationCode () {
          let copyText = this.shareForm.link + '\n' + '有效期限：' + this.$yyCommon.timeStampToDate(this.shareForm.endtime)
          return this.isPassword ? copyText + '\n' + '访问密码：' + this.shareForm.password : copyText
      }
  },
  methods: {
      // 复制成功
      copy(e) {
          console.log(e.text)
          this.$yyMessage({
                message: '复制成功',
                type: 'success'
          })
      },
      // 复制失败
      onError () {
          this.$yyMessage({
              message: '复制失败',
              type: 'error'
          })
      }
  }
}
</script>