vue 点击按钮实现复制粘贴功能 vue-clipboard2

官方文档：

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>