https://clipboardjs.com/
安装依赖：
npm install clipboard --save
在 HTML 层次进行复制：
//①引入包
import ClipboardJS from "clipboard";
//②通过 new 来实例化一次
mounted(){
new ClipboardJS('.btn');
},
//③直接使用
<h4 id="copy" value="http://www.baidu.com">http://www.baidu.com</h4>
<el-button class="btn" data-clipboard-target="#copy">一键复制</el-button>
通过 new 来实例化这个按钮，按钮通过属性 data-clipboard-target 在触发器元素中添加属性来实现，触发器会自动去寻找你指定的 id 元素，这个元素标签上的 value 就是你要复制的值。
电脑剪切板里面复制之前的数据是用户昵称，当我点一键复制的时候，被复制标签内容被选中。复制成功。
可以定义一个data-clipboard-action属性来指定是否要copy或cut内容。如果省略此属性，copy将默认使用。cut操作仅对<input>或起作用<textarea>。
改动代码如下：
<el-input style="width:200px;" id="copy" v-model="value"></el-input>
<el-button class="btn" data-clipboard-target="#copy" data-clipboard-action="cut">一键复制</el-button>
可以不复制其他内容，只复制你指定的内容。通过 data-clipboard-text 来实现，改動代碼如下：
<el-button class="btn" data-clipboard-text="自定義内容">一键复制</el-button>
自定义复制内容
某些情况下，我们想反馈用户在复制/剪切操作是否成功的交互效果。就类似下面这样：
核心代码思路，不用讲一看你就懂：
<span id = 'copyWallet'>需要被复制的内容</span>
<el-button
type="text"
data-clipboard-target="#copyWallet"
@click="copyWalletActive()"
id="copyButton"
>复制</el-button>
<=======分割线=======>
copyWalletActive() {
this.$nextTick(()=>{
const clipboard = new Clipboard("#copyButton");
clipboard.on('success', e => {
this.$message({ type: 'success', message: '复制成功' });
// 释放内存
clipboard.destroy();
});
clipboard.on('error', e => {
// 不支持复制
this.$message({ type: 'warning', message: '该浏览器不支持自动复制' });
// 释放内存
clipboard.destroy();
});
});
}
到这里遇到一个比较头疼的问题，当我们点击复制的时候，发现被复制的文字会默认被选中，就是去不掉，那只能另外想办法了，我想的办法是再放一个和被复制标签一样的一样标签，然后通过 overflow:hidden; 来隐藏，实验结果是不行，复制功能都失效了，那只能通过定位，让元素飞出屏幕。代码如下：
<span>需要被复制的内容</span>
<span style="position:fixed;top:-1000000px;" id = 'copyWallet'>需要被复制的内容</span>
这次终于成了。
怎么点都不怕
解决遗留的bug
上面留的那个头疼的问题，我当时写的时候就知道不能这么玩，但是为了生产没办法，无论好看与否业务能写出来就行了，今天吧官方文档看了下，里面讲的清清楚楚。只是这些破文档不像小说人人能看懂，人人能理解。
看看官网描述的高级用法：
如果你不想修改 HTML，我们提供了一个非常方面的命令式的 API 给你使用。你需要做的就是声明一个函数，做一些处理，并返回一个值。
如果你不想修改 HTML，这里指的就是默认情况下复制会选中文本。来看看用法：
this.$nextTick(()=>{
let that = this;
const clipboard = new Clipboard("#copyButton",{
text:()=>{
return that.$refs.copyWallet[0].innerHTML;
}
});
clipboard.on('success', e => {
this.$message({ type: 'success', message: '复制成功' });
// 释放内存
clipboard.destroy();
});
clipboard.on('error', e => {
// 不支持复制
this.$message({ type: 'warning', message: '该浏览器不支持自动复制' });
// 释放内存
clipboard.destroy();
});
});
就增加了一个函数用函数的返回值来替代默认行为。有点像 get 和 set 的意思。
补充时间：2020年1月2日20:04:12
网友评论