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

官方文档：

配置：

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>