官方文档:
https://vue-clipboard2.inndy.tw/
配置:
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
代码(基于elementui表格):
<template>
<div>
<span class="form-title">请求URL:</span>
<el-table
:data="tableData"
style="width: 100%"
:show-header="false"
border
text
:row-style="rowStyle">
<el-table-column align="center" prop="name" width="200">
</el-table-column>
<el-table-column align="center" prop="data">
<template slot-scope="scope">
<div class="post-style">{{scope.row.data}}</div>
<el-button
class="float-right"
v-clipboard:copy="scope.row.data"
v-clipboard:success="onCopy"
v-clipboard:error="onError">复制POST</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
id:0,
tableData:[
{
name: 'POST',
data: 'http://xxx:80/oauth/token'
}
]
}
},
methods: {
// 自定义列背景色
rowStyle({
row,
rowIndex,
}) {
if (rowIndex % 2 == 0) {
return "background:#f5f5f5;";
} else {
return "background:#ffffff;";
}
},
onCopy: function (e) {
this.$notify({
title: '复制成功',
type: 'success',
duration:1000
});
},
onError: function (e) {
this.$notify({
title: '复制失败,请稍后再试',
type: 'error',
duration:1000
});
}
},
}
</script>
<style lang="scss" scoped>
.post-style {
height: 32px;
line-height: 32px;
position: absolute;
left: calc(47% - 87px);
}
</style>