vue-element 使用插件clipboard实现复制功能

1.安装clipboard插件 ------------ npm install clipboard 

2.引入：

import Clipboard from "clipboard";

3.页面使用

       

                    

                      

                        
                          {{ item }}
                      
                      

                        复制
                      
                    
                  

4.data定义

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方法

   // 复制链接
    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();
      });
    },