項目中需要實現復制的功能，采用clipboard實現,clipboard.js的官網網址：http://www.clipboardjs.cn/

使用步驟：

一、安裝模塊

npm install clipboard --save 或者 cnpm install clipboard --save

二、使用

開始我是寫在方法里面實例化，導致第一次點擊兩次才復制成功，因為進入頁面之后 clipboard 沒有創建實例 ，再點擊復制之后才開始創建實例，創建實例之后并沒有完成復制

三、解決辦法

在?mounted 方法里創建?clipboard 實例

代碼如下（直接復制代碼。放到vue項目里面即可）

<template><div class="flex-box-column-center pdf"><img src="~@/assets/img/common/pdfLogo.png" alt=""><p class="f38 color-333">會議發票.pdf</p><p class="f26 color-333 pdf-href">{{pdfUrl}}</p><pclass="pdf-btn flex-box-column-center"@click.stop.prevent="copy($event)"ref='copyBtn'>復制發票地址</p><p class="f26 color-999">復制發票地址在瀏覽器中打開并下載發票</p></div> </template> <script> import Clipboard from 'clipboard' export default {data () {return {pdfUrl: sessionStorage.getItem('pdfUrl'), // pdf的網址clipboardExample: null // clipboard的實例}},mounted () {this.clipboard = new Clipboard(this.$refs.copyBtn, { text: () => this.pdfUrl });},methods: {copy(e) {this.clipboard.on('success', e => {this.$dialog.toast({mes: '復制成功',timeout: 1500,icon: 'success'});});this.clipboard.on('error', e => {this.$dialog.toast({mes: '復制失敗',timeout: 1500,icon: 'error'});});}} } </script> <style scoped> .pdf{img{width: 106px;margin: 200px auto 30px;}.pdf-href{margin: 60px auto 20px;padding: 0 80px;word-break: break-all;text-align: center;}.pdf-btn{width: 294px;height: 80px;font-size: 32px;color: #fff;border-radius: 40px;background: #1b82d2;margin-top: 60px;box-shadow: 0.05rem 0.05rem 0.1rem #cde4f5;cursor: pointer;margin: 60px auto 40px;} } </style>

?

總結

以上是生活随笔為你收集整理的vue 中 使用 clipboard 复制内容第一次点击两次才能成功问题修改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。