vue移动端中点击动态渲染数据 实现复制(避坑clipboard.js）

之前做过pc端的复制功能，按照之前写pc端的思路写移动端的复制功能 发现没生效，没有复制成功，一把辛酸泪，亲测避坑！

1. 首先还是使用clipboard.js
   官网链接：clipboard.js

npm install clipboard --save

2. 在所需要的页面引入

import Clipboard from "clipboard";

3. 我的html结构

  <div class="file-list" v-for="(item, index) in lists" :key="index">
        <div class="list_text" id="copy_text">
          {{ item.description }}
        </div>
        <div class="list_btns">
          <div class="btn">
            <img
              src="../../../assets/images/sourcek/text/fenxiang.png"
              alt=""
            />
            <span @click="handleTranspond(item)">分享</span>
          </div>
          <div
            class="btn copyText"
            @click="copyText(item.id)"
            data-clipboard-target="#copy_text"
          >
            <img src="../../../assets/images/sourcek/text/copy.png" alt="" />
            <span>复制</span>
          </div>
        </div>
      </div>

4. 在mounted生命周期里面：

mounted() { 
    this.Clipboard = (text) => {
      console.log("text===>", text);
      const cb = new Clipboard(".copyText", {
        text: () => {
          return text.description; //return要复制的内容
        },
      });
      cb.on("success", (e) => {
        console.log("复制成功", e);
        this.$toast.success("复制成功");
        // 释放内存
        cb.destroy();
      });
      cb.on("error", (e) => {
        this.$toast.fail("该浏览器或手机权限不支持复制功能");
        // 释放内存
        cb.destroy();
      });
    };
  },

5. 在methods方法里面的点击事件：

methods: { 
    //复制
    //页面是由 v-for 循环渲染出来，要给每一个结构里面的复制按钮加一个复制功能，然后对比找到点击的id的item数据，再调用Clipboard
    copyText(id) { 
      console.log("id==>", id);
      let newArr = this.lists.filter((item) => {
        if (id === item.id) {
          return item;
        }
      });
      console.log("newArr[0]===>", newArr[0]);
      this.Clipboard(newArr[0]);
      console.log("复制出去=====>");
    },
  },

6. 附上实现的效果：