復制功能，選中復制或者點擊復制（不使用插件的情況下）
1、選中復制
這個比點擊復制簡單點
<template>
<div>
<el-button type="primary" plain @click="copy()">復制</el-button>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
copy(){
document.execCommand("Copy"); // 執行瀏覽器復制命令
this.$message({
message: '復制成功',
type: 'success'
});
},
}
}
</script>
代碼如圖：
選中點擊按鈕即可復制，其實這個並不實用，有助於理解execCommand("Copy")。
2、點擊復制
（我是在vue+element UI中實現點擊表格中的按鈕復制表格中的數據；）
<template>
<div>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleCopy(scope.$index, scope.row)">復制</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data(){
return{
tableData:{
name:'小明'
},
copyData:null,
}
},
methods:{
handleCopy(index,row){
this.copyData = row.name
this.copy(this.copyData)
},
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>
如圖：
其實就是把值賦給一個創建的節點選中