前言
有一项业务需要先向后台发送请求,将请求到的内容复制到剪切板上。刚开始,我使用前端框架自带的插件clipboardjs,复制异步数据第一次无效,因为数据为空,第二次才成功,用异步的话也会报错。这个问题困扰我很久了,百度了一堆水文,都是复制粘贴大法。。。有的甚至连原文的格式都没有完全复制,敷衍至极。
解决过程
我以为是插件的问题,我就卸载了原来的clipboardjs插件,安装了vue-clipboard2插件
# 卸载插件
npm uninstall clipboard
# 安装插件
npm install --save vue-clipboard2
// 全局引用
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
下面是官方的demo,我是在这个基础上改了些代码
<div id="app"></div>
<template id="t">
<div class="container">
<input type="text" v-model="message">
<button type="button" @click="doCopy">Copy!</button>
</div>
</template>
<script>
new Vue({
el: '#app',
template: '#t',
data: function () {
return {
message: 'Copy These Text'
}
},
methods: {
doCopy: function () {
this.$copyText(this.message).then(function (e) {
alert('Copied')
console.log(e)
}, function (e) {
alert('Can not copy')
console.log(e)
})
}
}
})
</script>
我的代码
<template>
<el-tooltip content="复制到剪切板">
<el-button
type="text"
@click.prevent="handleCopyPw(scope.row.id)"
>
<vab-icon
icon="file-copy-line"
style="font-size: 16px; color: #606266"
/>
</el-button>
</el-tooltip>
</template>
<script>
// 接口
import { viewPW } from '@/api/password'
data() {
return {
copy_pass: '',
}
},
methods: {
// 通过接口获取数据
async getData(id) {
this.copy_pass = ''
const { data } = await viewPW(id)
this.copy_pass = data.password
},
// 异步复制
async handleCopyPw(id) {
await this.getData(id)
this.$copyText(this.copy_pass).then(
function (e) {
alert('复制成功')
},
function (e) {
alert('复制失败')
}
)
}
}
</script>
Github地址:
Inndy/vue-clipboard2: A simple vue2 binding to clipboard.js (github.com)
官网:
vue-clipboard2 | A simple vue2 binding to clipboard.js (inndy.tw)
clipboard.js — Copy to clipboard without Flash (clipboardjs.com)