Vue使用clipboard复制url

Vue使用clipboard复制url

clipboard是一个轻量级的框架，不依赖flash, 不依赖其他框架，实现了纯JavaScript的浏览器内容复制到系统剪贴板的功能。

1.安装cliboard

npm install clipboard --save

2.引入vue项目并注入

import clipboard from 'clipboard'

Vue.prototype.ClipboardJS = clipboard;

3.button按钮

<Button @click="share()" id="copyUrl" data-clipboard-action="copy"><Icon type="md-share-alt" />分享</Button>

4.事件调用

share(){
    var _val=window.location.href;
    new this.ClipboardJS('#copyUrl', {
     	text: function() {
             return _val;
     	}
    });
}

这里CliboardJS第一个参数是选择器（ DOM选择器, HTML 元素, 或者 HTML元素列表.），第二个参数是返回的文本。