In the project, we need to realize the function of replication, using clipboard, clipboard.js official website address: http://www.clipboardjs.cn/

Use steps:

I. Installation Module

npm install clipboard --save or cnpm install clipboard --save

Two, use

At first, I wrote in the method to instantiate, resulting in the first click twice before the replication success, because clipboard did not create an instance after entering the page, and then click on the replication before starting to create an instance, after creating the instance did not complete the replication.

III. Solutions

Create clipboard instance in mounted method

The code is as follows (copy the code directly). Put it in the vue project.

<template>
  <div class="flex-box-column-center pdf">
    <img src="~@/assets/img/common/pdfLogo.png" alt="">
    <p class="f38 color-333">Conference invoice.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'
      >Duplicate invoice address</p>
    <p class="f26 color-999">Copy the invoice address and open and download the invoice in the browser</p>
  </div>
</template>
<script>
import Clipboard from 'clipboard'
export default {
  data () {
    return {
      pdfUrl: sessionStorage.getItem('pdfUrl'), // pdf web site
      clipboardExample: null // Examples of clipboard
    }
  },
  mounted () {
    this.clipboard = new Clipboard(this.$refs.copyBtn, { text: () => this.pdfUrl });
  },
  methods: {
    copy(e) {
      this.clipboard.on('success', e => {
        this.$dialog.toast({
          mes: 'Replication success',
          timeout: 1500,
          icon: 'success'
        });
      });
      this.clipboard.on('error', e => {
        this.$dialog.toast({
          mes: 'copy failed',
          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>