clipboard + element-ui +vue 实现复制粘贴功能与提示

结合 clipboard.js 实现复制、粘贴功能

剪切功能参考官方文档，个人认为用不太上(有富文本编辑器的时候可能才用得上，也或许不需要自己实现)

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

• 这篇博客主要是介绍如何实现复制功能并搭配上友好的交互提示(见下方的 demo 图)

一般也就两种操作情况

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

demo 效果 

申明

clipboard.js 官方文档：clipboard.js

• 中文官网(好像更新没那么及时了)：木瓜影视|云播影视|麻花影院|集优影视

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

• 官网上的提示效果用的是 GitHub's Primer (具体什么个操作还不太懂，没去了解过)
• 页面上的复制成功提示效果调用的是 element-ui 的 Notification 通知 组件

环境配置

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

安装 element-ui...

步骤分析

// 0.复制选项 html 准备(参考官方文档了解配置项)
    
原样复制指定文本框内容
    

      Mussum ipsum cacilds...
      Copy
    
    
    
点击复制自定义内容到剪切板
    

      Copy
    

// 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

src\components\HelloWorld.vue

src\components\tableDataCopyDemo.vue

demo 地址

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

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

原生 JS API 了解

放个链接在这里，实在有需要再去了解

(监听下列事件，再结合 paste 中的案例，即可在复制时、剪切时、粘贴时给选中内容做处理)

亦可结合点击复制功能做个案例

• Element: copy 事件(可以给元素绑定事件监听)

• Element: cut 事件(可以给元素绑定事件监听)

• Element: paste 事件(可以给元素绑定事件监听)

  • 有使用案例

(contenteditable="true" html 标签属性，可以让元素变得像输入框一样可编辑，具体骚操作再看吧)

本文参考文档：

• 使用Vue的插件clipboard使用复制功能

• clipboard.js 中文站