# clipboard + element-ui +vue 实现复制粘贴功能

**Repository Path**: Suwanbin/clipboard-copy-paste

## Basic Information

- **Project Name**: clipboard + element-ui +vue 实现复制粘贴功能
- **Description**: vue + element-ui + clipboard.js 实现的复制粘贴 demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 0
- **Created**: 2020-08-27
- **Last Updated**: 2024-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

[toc]

# vue + element-ui + clipboard.js 实现复制、粘贴功能

> 剪切功能参考[官方文档](https://clipboardjs.com/)，个人认为用不太上（有富文本编辑器的时候可能才用得上，也或许不需要自己实现）

**想要知道怎么使用，优先参考官方文档**（如何指定要复制的数据，如何复制指定的数据...）

- 这篇博客主要是介绍如何完成这么一套操作

一般也就两种操作情况

- 1.复制指定元素的内容
  - data-clipboard-action="copy"（复制）
  - data-clipboard-target="#bar"（复制 id 为 bar 的元素的内容）
- 2.点击按钮直接复制设定的内容
  - data-clipboard-text="diyContent"（复制到剪切板的内容为 diyContent）

## demo 效果

![clipboardJS复制功能](markdown_images/README/clipboardJS复制功能.gif)

## demo 运行指南

```js
// 只需要很简单的两步
npm install
npm run serve
```

## 申明

clipboard.js 官方文档：[clipboard.js](https://clipboardjs.com/)

- 中文官网（好像更新没那么及时了）：http://www.clipboardjs.cn/

本博客 demo 采用的是 vue + element-ui + clipboard.js 实现

- 官网上的提示效果用的是 [GitHub's Primer](https://github.com/primer/primer-css/tree/master/modules/primer-tooltips) （具体什么个操作还不太懂，没去了解过）
- 页面上的复制成功提示效果调用的是 element-ui 的 `Notification 通知` 组件

## 环境配置

安装 clipboard.js：`npm install clipboard --save`

安装 element-ui...



## 步骤分析

```js
// 0.复制选项 html 准备（参考官方文档了解配置项）
    <p>原样复制指定文本框内容</p>
    <div class="row">
      <textarea id="bar">Mussum ipsum cacilds...</textarea>
      <el-button
        class="copyBtn"
        data-clipboard-action="copy"
        data-clipboard-target="#bar"
        icon="el-icon-copy-document"
      >Copy</el-button>
    </div>
    
    <p>点击复制自定义内容到剪切板</p>
    <div class="row">
      <el-button
        class="copyBtn"
        data-test="test..."
        :data-clipboard-text="diyContent"
        icon="el-icon-copy-document"
      >Copy</el-button>
    </div>

// 1.需要用到的地方引入 Clipboard
import Clipboard from 'clipboard'

// 2.用触发操作对象实例化一个 clipboard 对象
var clipboard = new Clipboard(".copyBtn");

// 3.为其指定操作成功回调函数
var that = this
clipboard.on("success", function (e) {
    console.info("Action:", e.action);
    console.info("Text:", e.text);
    console.info("Trigger:", e.trigger);

    // 清除选中状态
    e.clearSelection();

    that.$notify({
        title: '成功',
        message: '恭喜您复制成功，赶快去粘贴吧~',
        type: 'success',
        showClose: false
    });
});

// 4.为其指定操作失败回调函数
clipboard.on("error", function (e) {
    console.error("Action:", e.action);
    console.error("Trigger:", e.trigger);

    that.$notify.error({
        title: '失败',
        message: '操作失败，请重试！',
        showClose: false
    });
});
```

## demo 代码实现

> 结构不是很好，但重在实现

`src\App.vue`

```vue
<template>
  <div id="app">
    <HelloWorld />
    <tableDataCopyDemo />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import tableDataCopyDemo from './components/tableDataCopyDemo.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    tableDataCopyDemo
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

```

`src\components\HelloWorld.vue`

```vue
<template>
  <div class="hello">
    <p>原样复制指定文本框内容</p>
    <div class="row">
      <textarea id="bar">Mussum ipsum cacilds...</textarea>
      <el-button
        class="copyBtn"
        data-clipboard-action="copy"
        data-clipboard-target="#bar"
        icon="el-icon-copy-document"
      >Copy</el-button>
    </div>
    
    <p>点击复制自定义内容到剪切板</p>
    <div class="row">
      <el-button
        class="copyBtn"
        data-test="test..."
        :data-clipboard-text="diyContent"
        icon="el-icon-copy-document"
      >Copy</el-button>
    </div>
  </div>
</template>

<script>
import Clipboard from "clipboard";
export default {
  name: "HelloWorld",
  data() {
    return {
      clipboard: null,
      diyContent: '这是我自定义的拷贝内容！'
    };
  },
  mounted() {
    /*
    // 写法 1
    var that = this
    var clipboard = new Clipboard(".btn");
    clipboard.on("success", function (e) {
      console.info("Action:", e.action);
      console.info("Text:", e.text);
      console.info("Trigger:", e.trigger);

      // 清除选中状态
      e.clearSelection();

      that.$notify({
        title: '成功',
        message: '恭喜您复制成功，赶快去粘贴吧~',
        type: 'success',
        showClose: false
      });
    });

    clipboard.on("error", function (e) {
      console.error("Action:", e.action);
      console.error("Trigger:", e.trigger);

      that.$notify.error({
        title: '失败',
        message: '不支持复制哦！',
        showClose: false
      });
    });
    */
    this.clipboard = new Clipboard(".copyBtn");
    this.clipboard.on("success", this.successFunc)
    this.clipboard.on("error", this.errorFunc)
  },
  methods: {
    successFunc (e) {
      console.info("Action:", e.action);
      console.info("Text:", e.text);
      console.info("Trigger:", e.trigger);
      // 可以取到目标元素上的自定义属性（可以据此再做一些处理）
      e.trigger.dataset.test && console.log(e.trigger.dataset.test)
      // 清除选中状态
      e.clearSelection();

      this.$notify({
        title: '成功',
        message: '恭喜您复制成功，赶快去粘贴吧~',
        type: 'success',
        showClose: false
      });
    },
    errorFunc (e) {
      console.error("Action:", e.action);
      console.error("Trigger:", e.trigger);

      this.$notify.error({
        title: '失败',
        message: '操作失败，请重试！',
        showClose: false
      });
    }
  },
  beforeDestroy() {
    // 释放内存
    this.clipboardclipboard.off("error");
    this.clipboardclipboard.off("success");
    this.clipboardclipboard.destroy();

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
}
#bar{
  margin-right: 15px;
}
.row{
  display: flex;
  justify-content: center;
}
</style>

```

`src\components\tableDataCopyDemo.vue`

```vue
<template>
    <div style="margin-right: auto;margin-left: auto;width: 800px">
      <p>复制表格数据，自定义组合</p>
      <el-table :data="list">
        <el-table-column label="云盘链接" prop="url"></el-table-column>
        <el-table-column label="提取码" prop="code"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="copyLink(scope.row)" class="tag">复制</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  name: 'ClipboardTest',
  data () {
    return {
      list: [
        {'url': 'https://www.baidu.com/1', 'code': '1234'},
        {'url': 'https://www.baidu.com/2', 'code': '7777'},
        {'url': 'https://www.baidu.com/3', 'code': '9999'}
      ]
    }
  },
  methods: {
    copyLink (data) {
      console.log(1)
      let clipboard = new Clipboard('.tag', {
        text: function () {
          return `云盘链接：${data.url} 提取码：${data.code}`
        }
      })
      clipboard.on('success', e => {
        console.info("Action:", e.action);
        console.info("Text:", e.text);
        console.info("Trigger:", e.trigger);
        // this.$message({message: '复制成功', showClose: true, type: 'success'})
        
        this.$notify({
          title: '成功',
          message: '恭喜您复制成功，赶快去粘贴吧~',
          type: 'success',
          showClose: false
        });
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        console.error("Action:", e.action);
        console.error("Trigger:", e.trigger);
        // this.$message({message: '复制失败,', showClose: true, type: 'error'})
        this.$notify.error({
          title: '失败',
          message: '操作失败，请重试！',
          showClose: false
        });
        clipboard.destroy()
      })
    }
  }
}
</script>

<style scoped>

</style>
```



本文参考文档：

- [使用Vue的插件clipboard使用复制功能](https://www.cnblogs.com/linchen1300/p/10219966.html)

- [clipboard.js 中文站](http://www.clipboardjs.cn/)



## demo 地址

- [clipboard + element-ui +vue 实现复制粘贴功能](https://gitee.com/Suwanbin/clipboard-copy-paste)

（如果帮到你了，记得帮我点个 star，非常感谢~）