Vue-element uses the plug-in clipboard to realize the copy function

1. Install the clipboard plugin ------------ npm install clipboard 

2. Introduce:

import Clipboard from "clipboard";

3. Page usage

       <div class="content">
                    <div
                      class="item"
                      v-for="(item, key) in linkList"
                      :key="key"
                    >
                      <div class="link">
                        <a
                          :href="item"
                          target="_blank"
                          id="link"
                        >
                          {
   
   { item }}</a
                        >
                      </div>
                      <div class="copy">
                        <el-button
                          type="text"
                          class="copy-btn"
                          data-clipboard-action="copy"
                          data-clipboard-target="#link"
                          @click="copyLink(item)"
                          >复制</el-button
                        >
                      </div>
                    </div>
                  </div>

4.data definition

linkList:['https://www.youtube.com/watch?v=YQHsXMglC9A', 
'https://www.hello-products.com/', 
'https://www.hellofresh.com/', 
'https://www.sanrio.com/', 
'https://www.hellomagazine.com/']

5.method method

   // 复制链接
    copyLink(link) {
      console.log("复制", link);
      let clipboard = new Clipboard(".copy-btn",{
        text: function () {
          return link
        }
      });
      clipboard.on("success", (e) => {
        this.$message({ message: "复制成功", type: "success" });
        clipboard.destroy(); // 使用destroy可以清楚缓存
      });
      clipboard.on("error", (e) => {
        this.$message({ message: "复制失败", type: "error" });

        clipboard.destroy();
      });
    },