vue实现复制文字功能

3,310 阅读1分钟

html部分

<div class="main"  v-for="(item,index) in List" :key="index"> 
            
            <p v-if="item.makeType==2">
              <span :ref="'textzfb'+index">支付宝账号:{{item.alAccount}}</span>
              <span class="copy" @click="copyzfb(index)">复制</span>
              <textarea :ref="'inputzfb'+index" :value="item.alAccount" class="textarea"></textarea>
            </p>
  
 </div>

methods部分

    copyzfb(idx) {
        console.log(this.$refs["inputzfb" + idx][0]);
        this.$refs["inputzfb" + idx][0].select(); // 选中文本
        document.execCommand("copy"); // 执行浏览器复制命令
    }, 

实现的思路就是生成textarea让其内容为要复制的内容,当点击复制找到对应的文本域复制其内容,当然这个文本域的样式要自己将其隐藏。