手寫

<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框的內(nèi)容
         this.$refs.inputElement.select();
         // 執(zhí)行瀏覽器復制命令
         document.execCommand("Copy");
         // 提示已復制
         alert('已復制');
      }
  }
}
</script>
<style>
  .hide {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -10;
  }
</style>

注：知識點 - 隱藏元素但可以觸發(fā)事件

/*
  方法一： display: none
          元素將不再占用頁面空間熄攘，會引起瀏覽器的重排和重繪
          不會觸發(fā)綁定事件
*/
.div {
    display: none
}
/*
  方法二： visibility: hidden
          元素仍然占用頁面空間娃惯，只會重繪不會重排
          不會觸發(fā)綁定事件
*/
.div {
    visibility: hidden
}
/*
  方法三： opacity: 0
          元素仍然占用頁面空間呻粹，只會重繪不會重排
          會觸發(fā)綁定事件
*/
.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>