1.下载包
npm i --save copy-to-clipboard
2.引用以及使用方法
//template部分
<el-table v-loading="loading" :data="tableList">
<el-table-column
label="mqtt密码"
align="center"
prop="passWord"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ scope.row.passWord
}}<i
class="el-icon-document-copy"
@click="copyData(scope.row.passWord)"
style="margin-left: 5px; cursor: pointer; color: #409eff"
></i>
</template>
</el-table-column>
</el-table>
//script部分
import copy from "copy-to-clipboard";
export default {
data(){
return(){
copy,
...
},
},
methods:{
copyData(data) {
try {
navigator.clipboard.writeText(data);
this.$message({
type: "success",
message: "信息已复制到剪贴板",
});
} catch (error) {
this.$message({
type: "success",
message: "信息已复制到剪贴板",
});
this.copy(data);
}
},
}
}
本文介绍了如何在Vue.js项目中使用npm包copy-to-clipboard实现表格单元格内容(如MQTT密码)的复制功能,通过`copyData`方法结合`navigator.clipboard`API提供便捷的剪贴板操作。

1773

被折叠的 条评论
为什么被折叠?



