1200字范文 > 用vue实现复制到剪切板 clipboard.js

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

时间：2021-03-10 10:45:34

用vue实现复制到剪切板

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

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

一、下载：

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

二、引入：

*戳：/zenorocha/clipboard.js/wiki/CDN-Providers选择一个CDN资源或直接使用下载好的文件:
<script src="dist/clipboard.min.js" ></script>

三、使用：

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

<p>链接：<a> </a><button>复制</button></p>

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

html部分：
<p>链接：<a id="targetId"> </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();