核心原理： 利用浏览器提供的 copy 命令
注意： 对 ipad、iphone 等苹果移动端需做单独处理
由于项目需求需要一个远程桌面的内容，开始调研了 guacamole，

一、业务组件的开发

1.1 粘贴板 clipboard.js 的使用方法

一、使用场景

在移动端开发的时候，有的应用需要用户拷贝页面的内容，方便用户操作。此时，就是需要是用粘贴板功能。

二、使用步骤

1. npm 安装 clipboard.js 插件

npm install clipboard –save

2. 页面 dom 结构

3. 在文件中引入

import clipboard from ‘@/lib/clipboard’

4. 使用方法

三、注意事项

  • 如果需要在复制成功后，做业务处理，注意此时需要在 success 执行。
  • 对于 success 事件中，需要注意 this 的指向问题。this 测试不是指向 vue 实例。
  • currentPageUrl 用户需要拷贝的文本。

1.2 剪切 clipboard.js 的使用方法

剪切

另外，也可以定义 data-clipboard-action 属性为 copy/cut 来，明确操作是 复制 / 剪切
如果忽略了这个属性，便默认 复制

1
2
3
4
5
6
7
1. <!-- Target -->
2. <textarea id="bar">Mussum ipsum cacilds...</textarea>
3.
4. <!-- Trigger -->
5. <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
6.     Cut to clipboard
7. </button>

正如上例，剪切 cut 的操作只能在 和