前端文字复制剪贴板

开始

npm install clipboard --save

主要逻辑

在utils文件夹下新建clipboard.js文件

import Vue from "vue";
import Clipboard from "clipboard";

function clipboardSuccess() {
  Vue.prototype.$message.success("复制成功");
}

function clipboardError() {
  Vue.prototype.$message.error("复制失败");
}

export default function handleClipboard(text, event) {
  const clipboard = new Clipboard(event.target, {
    text: () => text,
  });
  clipboard.on("success", () => {
    clipboardSuccess();
    clipboard.destroy();
  });
  clipboard.on("error", () => {
    clipboardError();
    clipboard.destroy();
  });
  clipboard.onClick(event);
}

页面使用

页面

<el-table-column label="操作" align="center" fixed="right">
  <template slot-scope="scope">
    <el-button type="text" @click="copyUrl(scope.row.url,$event)"
      >复制链接</el-button>
  </template>
</el-table-column>

页面的script部分

import handleClipboard from "@/utils/clipboard";

// 复制链接
copyUrl(text, event) {
    handleClipboard(text, event)
},