vue 一键复制

经常遇到一键复制功能，简单记录一下。这里使用的是clipboard插件：https://clipboardjs.com/

第一步

npm install clipboard --save

第二步:引入：

import clipboard from 'clipboard';
Vue.prototype.clipboard = clipboard;

第三步：使用：

<el-table
		:data="tableData"
		style="width: 100%">
		<el-table-column
			prop="date"
			label="日期"
			width="180">
		</el-table-column>
		<el-table-column
			prop="name"
			label="姓名"
			width="180">
		</el-table-column>
		<el-table-column
			prop="address"
			label="地址">
		</el-table-column>
		<el-table-column
			fixed="right"
			label="操作"
			width="100">
			<template slot-scope="scope">
				<el-button data-clipboard-action="copy" class="cobyDomObj" :data-clipboard-text="copyText+scope.row.id" @click="handleClick(scope.row)" type="text" size="small">复制</el-button>
			</template>
		</el-table-column>
	</el-table>

data() {
    return {
      copyText: "/pages/home/index/?id=",
      tableData: [
        {
          id: "1",
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: "2",
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          id: "3",
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          id: "4",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };

methods: {
    handleClick(row) {
      let _this = this;
      let clipboardObj = new this.clipboard(".cobyDomObj");
      clipboardObj.on("success", function() {
        _this.$message.success("复制成功");
      });
      clipboardObj.on("error", function() {
        _this.$message.error("复制失败");
      });
    }
  },

参考于:https://www.cnblogs.com/changxue/p/10562601.html

但是：发现不是那么地好用，比如点击第四行的时候，会弹出多个"复制成功"，所有，换了种方法，如下：

效果：

修改的代码部分：

<el-tooltip class="item" effect="dark" :content="copyText+scope.row.id" placement="top">
	<el-button @click="handleClick(scope.row)" type="text" size="small">复制</el-button>
</el-tooltip>

handleClick(row) {
   	let Url = this.copyText+row.id;  //每一行的某个值，如选中的当前行的url
    var oInput = document.createElement('input');     //创建一个隐藏input（重要！）
    oInput.value = Url;    //赋值
    console.log(oInput.value);
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    oInput.className = 'oInput';
    oInput.style.display='none';
    this.$message.success('复制成功');
    }

参考：https://blog.csdn.net/weixin_45140661/article/details/92005667