js、vue文本点击复制内容
第一种办法
<div class="copy-btn2" @click="copyOrderId2('复制成功了2222222')"><i class="el-icon-document-copy"></i>复制链接</div>copyOrderId2(orderId) {var input = document.createElement("input"); // 创建input对象input.value = orderId; // 设置复制内容document.body.appendChild(input); // 添加临时实例input.select(); // 选择实例内容document.execCommand("Copy"); // 执行复制document.body.removeChild(input); // 删除临时实例this.$message.success('复制成功！');
},
第二种办法
1、引入clipboard.js
第一种直接npm安装：
npm install clipboard --save
第二种下载clipboard.js（下载地址：clipboard.js — Copy to clipboard without Flash）
<script src="js/clipboard.min.js"></script>
2、在需要使用的组件中import
引用方法：import Clipboard from ‘clipboard’;
3、添加需要复制的内容
<button class="tag-read" data-clipboard-text="我是可以复制的内容，请点击复制" @click="copy">复制</button>
4、添加点击后的方法
copy() {var clipboard = new Clipboard('.tag-read')clipboard.on('success', e => {console.log('复制成功')// 释放内存clipboard.destroy()})clipboard.on('error', e => {// 不支持复制console.log('该浏览器不支持自动复制')// 释放内存clipboard.destroy()})}
