功能
点击按钮或指定位置后将数据复制到剪贴版,避免手动复制
核心方法是
document.execCommand("Copy");
但是这个是需要文字被选中时才可以复制成功
所以第二个方法就是创建一个input后再自动选择内容,实现复制功能
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- element-ui导入--><link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css"><!-- index样式导入--><link rel="stylesheet" href="../css/index.css"><script src="../js/vue.js"></script><script src="../js/axios-0.18.0.js"></script><script src="../js/element-ui/lib/index.js"></script>
</head>
<style>.demo-table-expand {font-size: 0;}.demo-table-expand label {width: 90px;color: #99a9bf;}.demo-table-expand .el-form-item {margin-right: 0;margin-bottom: 0;width: 50%;}
</style>
<body><div id="div"><span>可用试试用鼠标选中我后复制(win+e查看剪贴版)</span><el-button type="primary" plain @click="selectCopy()">选中文字后复制</el-button><!-- 复制密码按钮--><template><el-table:data="tableData"style="width: 100%"><el-table-column type="expand"><template slot-scope="props"><el-form label-position="left" inline class="demo-table-expand"><el-form-item label="复制商品"><span @click="copy(props.row.name)">{{ props.row.name }}</span></el-form-item><el-form-item label="复制店铺"><el-button type="text" @click="copy(props.row.shop)" >复制店铺</el-button></el-form-item></el-form></template></el-table-column><el-table-columnlabel="商品 ID"prop="id"></el-table-column><el-table-columnlabel="商品名称"prop="name"></el-table-column><el-table-columnlabel="描述"prop="desc"></el-table-column></el-table></template></div>
</body><script>new Vue({el: "#div",data: {tableData: [{id: '12987122',name: '好滋好味鸡蛋仔',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',address: '上海市普陀区真北路',shop: '王小虎夫妻店',shopId: '10333'}, {id: '12987123',name: '好滋好味鸡蛋仔',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',address: '上海市普陀区真北路',shop: '王小虎夫妻店',shopId: '10333'}],copyData: null},methods: {// 选中文字后复制selectCopy() {document.execCommand("Copy"); // 执行浏览器复制命令this.$message({message: '复制成功',type: 'success'});},// 点击复制copy(data) {let url = data;let oInput = document.createElement('input');oInput.value = url;document.body.appendChild(oInput);oInput.select(); // 选择对象;console.log(oInput.value)document.execCommand("Copy"); // 执行浏览器复制命令this.$message({message: '复制成功',type: 'success'});oInput.remove()}}})
</script>
</html>
