用vue实现复制到剪切板 clipboard.js

用vue实现复制到剪切板

通过在网上查看比较，发现使用clipboard.js是比较理想的手段：1，不用flash，2，插件很小，压缩后只有3kb。

关于clipboard.js，官方文档请戳：https://clipboardjs.com。由于文档是英文的，下面我会简单解释一下具体使用方法。其实目前已经有根据该插件封装好的vue插件了，由于项目中只有一个地方用到该功能，我就没有去考虑封装插件的情况。不过，就算不用封装插件，在vue中使用起来也是很简单，基本上只要按照官网文档的使用方法来就ok。如果有踩到坑的欢迎留言补充。

一、下载：

• 通过npm安装：npm install clipboard –save
• 直接下载压缩文件，请戳：https://github.com/zenorocha/clipboard.js/archive/master.zip

二、引入：

*戳：https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers选择一个CDN资源或直接使用下载好的文件:




三、使用：

• 当需要复制的内容在另一个dom上，比如：
  

  链接：http://www.baidu.com 复制

  
  通过点击button来复制前面的链接时，使用方法如下：

  html部分：

  
  <p>链接：<a id="targetId">http://www.baidu.com a>
  
  <button class="btn" data->clipboard-target="#targetId">复制button>
  p>

  js部分：

  通过传递dom的选择器或html等来初始化一个实例
  
var clipboard = new ClipboardJS('.btn');

• 当需要剪切操作时，只需要为button指定data-clipboard-action属性为cut即可。该属性默认值是copy

  html部分修改为：

  
  <textarea id="bar">Mussum ipsum cacilds...textarea>
  
  <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
   Cut to clipboard
  button>

  注意：cut属性只能用于input textarea这类target元素上

• 当然，如果复制的内容就是触发元素本身呢？可以使用data-clipboard-text属性。

  html部分修改为：

  
  <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
  Copy to clipboard
  button>

四、事件

为提高用户友好性，你可能需要给用户一些操作反馈或错误提示，或者捕获触发事件的dom对象，clipboard.js提供了‘success’ ‘error’事件。

var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection(); //该方法用于清除文本选中后的默认样式（一般是文本区域出现背景色）
});
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

五、高阶用法

如果你不想像前面提到的一样修改现有的HTML，可以使用clipboard.js提供的API。只需要声明函数，处理逻辑然后返回需要的值。比如,

• 如果你想动态的设置target html，你需要返回一个Node:

  new ClipboardJS('.btn', {
      target: function(trigger) {
          return trigger.nextElementSibling;
      }
  });

• 如果你想动态设置被复制的内容，需要返回string:

  new ClipboardJS('.btn', {
      text: function(trigger) {
          return trigger.getAttribute('aria-label');
      }
  });

• 如果你使用bootstrap 模态框，或者其他插件，当当前focus的元素改变时，需要手动指定当前container为focused的元素:

  new ClipboardJS('.btn', {
      container: document.getElementById('modal')
  });

• 如果是在单页面应用里，为了更精确的处理dom在不同生命周期的逻辑，你需要销毁创造的事件和实例，使用下面方式:

  var clipboard = new ClipboardJS('.btn');
  clipboard.destroy();

六、浏览器支持

clipboard.js能被以下浏览器支持：
* chrome 42+
* IE edge 12+
* Firefox 41+
* IE 9+
* Opera 29+
* Safari 10+

为了有更好的用户体验，在使用时，可以在success回调里提示‘复制/剪切成功’，在error回调里提示：‘请按Ctrl + C进行复制’,因为此时的内容已经被选中了。

另外：你也可以通过执行ClipboardJS.isSupported()来判断浏览器是否支持clipboard.js，如果不支持，您可以将复制/剪切按钮从页面上隐藏。

---

以上是对clipboard.js的使用介绍。基本就是对官方文档的翻译。我在项目里只用到了基础的用法，还没有尝试高阶用法。所以解释的可能不是很到位。欢迎有用到的同学一块交流学习。