需求描述：点击复制粘贴按钮时，调取接口，然后复制接口返回的数据。
1. 安装
npm install clipboard -S
2.使用
引入：
import Clipboard from 'clipboard'
html:
<a href="javascript:;" @click="copy" id="copy" :data-clipboard-text="copyData">复制到粘贴板</a>
实现思路：点击按钮时，执行copy方法（先使用await，待接口有响应之后，这时copyData已经有值，再创建clipboard实例）。
async copy(evnet) {let flag = await this.copyClipboardFun()if(!flag) returnlet _that = thislet clipboard = new Clipboard('#copy');clipboard.on('success', e => {console.log("success--")_that.$toast({message: "复制成功",position: "center",duration: 1000});// 释放内存clipboard.destroy()})clipboard.on('error', (e) => {console.log("失败---",e)_that.$toast({message: "复制失败",position: "center",duration: 1000});// 释放内存clipboard.destroy()});},copyClipboardFun() {return this.$axios({method: 'POST',url: copyClipboard}).then(({data}) => {if(data.code == 0 && data.payload) {let keyAndVal = data.payload.data || []let {title } = data.payloadthis.copyData = title + ':'keyAndVal.length && keyAndVal.forEach(key => {this.copyData = this.copyData + '\n' + key})return true} else {this.$toast({message: "复制失败",position: "center",duration: 1000});return false}}).catch(() => {rerurn false})},
本以为这样就可以了。
结果：第一次点击按钮，没有复制成功或者复制失败的提示。第二次点击按钮，提示复制成功。复制结果为第一次请求接口返回后的值。
这与预想的不一致啊。经查阅，原来是复制操作中，不能包含任何异步的操作（对copyData赋值），即便包含，复制的还是copyData之前的值。
解决方式：添加元素，使其模拟真正的复制操作。但页面不可见，设置opacity为0即可。待接口请求完成，模拟此元素的点击操作
<a href="javascript:;" @click="copyClipboardFun">复制到粘贴板</a><span class='c-btn' @click="copy" id="copy" ref="copy" :data-clipboard-text="copyData" ></span>.c-btn{cursor:pointerwidth: 1px;height: 1px;opacity: 0;display: inline-block;}
copy(evnet) {evnet.preventDefault()let _that = thislet clipboard = new Clipboard('.c-btn');clipboard.on('success', e => {console.log("success--")_that.$toast({message: "复制成功",position: "center",duration: 1000});// 释放内存clipboard.destroy()})clipboard.on('error', (e) => {console.log("失败---",e)_that.$toast({message: "复制失败",position: "center",duration: 1000});// 释放内存clipboard.destroy()});},copyClipboardFun() {this.$axios({method: 'POST',url: copyClipboard}).then(({data}) => {if(data.code == 0 && data.payload) {let keyAndVal = data.payload.data || []let {title } = data.payloadthis.copyData = title + ':'keyAndVal.length && keyAndVal.forEach(key => {this.copyData = this.copyData + '\n' + key})let _that = thisthis.$forceUpdate()setTimeout(()=>{//模拟点击真正复制链接的按钮 _that.$refs.copy.click();},10)} else {this.$toast({message: "复制失败",position: "center",duration: 1000});}}).catch(() => {})},
以上就完美的实现了，复制到粘贴板的操作。
最后，以上方式，还解决了在ios上复制失败的问题
