vue粘貼復制功能的實現過程記錄
引言
項目中如果實現粘貼復制功能,目前市面上共有三種方法,均有利有弊,大家可以根據自己項目實際情況依次選擇。本節(jié)將都會對這三種方法做詳細闡述,重點推薦第三種方法。
1. 項目需求圖展示:

1. 安裝第三方插件方法(不推薦)
這種方法兼容性很好,如果項目只使用了一次,不建議使用。
安裝插件
npm install clipboard --save
引入插件
import Clipboard from 'clipboard';
項目中使用
<template>
<span class="copy" @click="onCopy">
<i class="iconfont iconcopy"></i>
<span>點擊復制</span>
</span>
</template>
<script>
methods: {
onCopy(){
let clipboard = new Clipboard('.copy')
clipboard.on('success', e => {
console.log('復制成功')
// 釋放內存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持復制
console.log('該瀏覽器不支持自動復制')
// 釋放內存
clipboard.destroy()
})
}
}
</script>2. 瀏覽器自帶Document.execCommand()復制方法(不推薦)
雖然這個方法不需要安裝插件,但是官網申明如下:

項目中使用
<script>
methods: {
onCopy(){
//創(chuàng)建一個input框
const input = document.createElement("input")
//將指定的DOM節(jié)點添加到body的末尾
document.body.appendChild(input)
//設置input框的value值為直播地址
input.setAttribute("value", e)
//選取文本域中的內容
input.select()
//copy的意思是拷貝當前選中內容到剪貼板
//document.execCommand()方法操縱可編輯內容區(qū)域的元素
//返回值為一個Boolean,如果是 false 則表示操作不被支持或未被啟用
if (document.execCommand("copy")) {
document.execCommand("copy")
}
//刪除這個節(jié)點
document.body.removeChild(input)
}
</script>3. Clipboard.writeText方法(強烈推薦)
說明
Clipboard 接口的 writeText() 方法可以寫入特定字符串到操作系統(tǒng)的剪切板。會返回一個Promise ,一旦剪貼板的內容被更新,它就會被解析。如果調用者沒有寫入剪貼板的權限,則拒絕寫入剪切板(reject)
項目中使用
onCopy() {
navigator.clipboard.writeText(this.detailData.clientSecret).then(() => {
this.$message.success('復制成功')
})
}總結
到此這篇關于vue實現粘貼復制功能的文章就介紹到這了,更多相關vue粘貼復制功能內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
在Vue 3中使用OpenLayers讀取WKB數據并顯示圖形效果
WKB作為一種緊湊的二進制格式,在處理和傳輸空間數據時具有明顯優(yōu)勢,本文介紹了如何在Vue 3中使用OpenLayers讀取WKB格式的空間數據并顯示圖形,感興趣的朋友一起看看吧2024-12-12

