序文
最初にリクエストをバックグラウンドに送信し、リクエストされたコンテンツをクリップボードにコピーする必要があるビジネスがあります。当初はフロントエンドフレームワークに付属するプラグインclipboardjsを使用していましたが、1回目は非同期データのコピーはデータが空のため無効でしたが、2回目で成功しました。エラーも報告されます。この問題は私を長い間悩ませてきましたが、Baidu には水文学がたくさんあり、それらはすべてコピー＆ペーストされています。。。原文の形式を完全にコピーしていないものもあり、非常におざなりでした。
解決プロセス
プラグインの問題だと思ったので、元のclipboardjsプラグインをアンインストールし、vue-clipboard2プラグインをインストールしました
# 卸载插件
npm uninstall clipboard
# 安装插件
npm install --save vue-clipboard2// 全局引用
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)以下は公式デモです。これに基づいていくつかのコードを変更しました
<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: Clipboard.js への単純な vue2 バインディング (github.com)
公式ウェブサイト：