项目中需要实现复制的功能，采用clipboard实现,clipboard.js的官网网址：http://www.clipboardjs.cn/

使用步骤：

一、安装模块

npm install clipboard --save 或者 cnpm install clipboard --save

二、使用

开始我是写在方法里面实例化，导致第一次点击两次才复制成功，因为进入页面之后 clipboard 没有创建实例 ，再点击复制之后才开始创建实例，创建实例之后并没有完成复制

三、解决办法

在 mounted 方法里创建 clipboard 实例

代码如下（直接复制代码。放到vue项目里面即可）

<template>
  <div class="flex-box-column-center pdf">
    <img src="~@/assets/img/common/pdfLogo.png" alt="">
    <p class="f38 color-333">会议发票.pdf</p>
    <p class="f26 color-333 pdf-href">{{pdfUrl}}</p>
    <p
      class="pdf-btn flex-box-column-center"
      @click.stop.prevent="copy($event)"
      ref='copyBtn'
      >复制发票地址</p>
    <p class="f26 color-999">复制发票地址在浏览器中打开并下载发票</p>
  </div>
</template>
<script>
import Clipboard from 'clipboard'
export default {
  data () {
    return {
      pdfUrl: sessionStorage.getItem('pdfUrl'), // pdf的网址
      clipboardExample: null // clipboard的实例
    }
  },
  mounted () {
    this.clipboard = new Clipboard(this.$refs.copyBtn, { text: () => this.pdfUrl });
  },
  methods: {
    copy(e) {
      this.clipboard.on('success', e => {
        this.$dialog.toast({
          mes: '复制成功',
          timeout: 1500,
          icon: 'success'
        });
      });
      this.clipboard.on('error', e => {
        this.$dialog.toast({
          mes: '复制失败',
          timeout: 1500,
          icon: 'error'
        });
      });
    }
  }
}
</script>
<style scoped>
.pdf{
  img{
    width: 106px;
    margin: 200px auto 30px;
  }
  .pdf-href{
    margin: 60px auto 20px;
    padding: 0 80px;
    word-break: break-all;
    text-align: center;
  }
  .pdf-btn{
    width: 294px;
    height: 80px;
    font-size: 32px;
    color: #fff;
    border-radius: 40px;
    background: #1b82d2;
    margin-top: 60px;
    box-shadow: 0.05rem 0.05rem 0.1rem #cde4f5;
    cursor: pointer;
    margin: 60px auto 40px;
  }
}
</style>