// Needless to say
npm install clipboard

How to use:

// template I have seen a lot of information, but in Vue, it is not recommended to use the REF method as much as possible
<span
class="tag"
ref="copy"
@click="copy"
>{
    {
    newPassword}}</span>

//methods
copy() {
    
      let copy = this.$refs.copy
      let clipboard = new Clipboard(copy, {
    
        text: (trigger) => {
    
          return this.password
        }
      });
      console.log('2');
      clipboard.on("success", (e) => {
    
        console.log('1');
        this.$message({
    message: 'Copy successfully', showClose: true, type: 'success'})
        // Release memory
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
    
        this.$message({
    message: 'Copy failed,', showClose: true, type: 'error'})
        clipboard.destroy();
      });
    },

—————————————————————————————
The problem of the first click on the first click, the second click to take effect is solved as follows:

After being explored by yourself, two methods came out.
Reason: Look at the picture first


Note: Introduced this plug -in in the Vue file. We just instantly instantiated this plug -in when clicking the call method, so the first click has no effect

First: Mount this method in MouNTED, and an example has been created after loading the page, solving the problem of clicking (recommended)

Second: The instance is directly mounted in the mouNTED. You do n’t need to create an instance like the graph above in the method. After the loading page is completed, create an instance.

  mounted(){
    
    this.clipboard = new Clipboard(this.$refs.copy, {
    
        text: (trigger) => {
    
          return this.password
        }
      });
  },

copy() {
    
      this.clipboard.on("success", (e) => {
    
        this.$message({
    message: 'Copy successfully', showClose: true, type: 'success'})
      });
      this.clipboard.on("error", (e) => {
    
        this.$message({
    message: 'Copy failed,', showClose: true, type: 'error'})
        this.clipboard.destroy();
      });
    }