Vue implements clipboard copy function

Xiaobai simply records the needs encountered in his work: how to implement the copy function in vue (Note: Relying on third-party plug-in clipboard)

1. Install plug-ins

The first type is directly installed npm:npm install clipboard --save

The second type: <script src="js/"></script>(Download address:/）

2. Global injection ()

import VueClipboard from 'vue-clipboard2'

  (VueClipboard)

3. The packaging method is convenient for multiple use

How to use the project to store a new file multiple times

export default{
  install(Vue,opstion){
    //Write the method on the vue prototype for easy calling    = function (value) {
    this.$copyText(
     `${value}`
    ).then( res =&gt; {
     //This is the Message message prompt component of element      this.$message({
       message: "Copy successfully",
       type: "success"
      });
     },
     err =&gt; {
      this.$("Copy failed");
     }
    );
   },
  }
}

4. Call the copy method in the page that needs to be copied

&lt;template&gt;
     &lt;el-tooltip class="item" effect="dark" content="copy" placement="bottom"&gt;
       &lt;i class="icon copy iconfont" @="copyCode()"&gt;&lt;/i&gt;
     &lt;/el-tooltip&gt;
    &lt;/template&gt;
    
    &lt;script&gt;
    
    //Just just call the copy method      copyCode(scope) {
      //Send value to copy content         ();
       },
    &lt;/script&gt;

Summarize

The above is the Vue implementation clipboard copy function introduced to you by the editor. I hope it will be helpful to everyone!