使用VUE實現(xiàn)一鍵復制內(nèi)容功能
更新時間：2023年04月25日 09:59:58 作者：wendycwb
這篇文章主要介紹了使用VUE實現(xiàn)一鍵復制內(nèi)容功能,功能就是當我們點擊復制按鈕時，會提示“復制成功”，這樣復制的內(nèi)容就可以在其他地方使用了，感興趣的朋友可以學習一下
接到一個需要，需要在pc端實現(xiàn)一鍵復制粘貼功能，如圖所示：
當我點擊復制按鈕時，會提示“復制成功”，這樣復制的內(nèi)容就可以在其他地方使用了 具體實現(xiàn)方法如下： 我寫了一個公共的方法
在調(diào)用之前需要先引入，當然可以全局引入，也可以局部引入，因為我只有一個地方用到，所以我是局部引入的：
然后在需要復制的地方直接調(diào)用這個方法即可：
代碼參考如下：
//這個是寫的公共方法
const copyText = function(value, that) {
const aux = document.createElement('input')
aux.setAttribute('value', value)
document.body.appendChild(aux)
aux.select()
document.execCommand('copy')
document.body.removeChild(aux)
that.$message.success('復制成功')
}
export { copyText }
//這個是引入
import { copyText } from '@/utils/copeText'
copeAddress(data) {
//data表示要復制的內(nèi)容
copyText(data, this) // 這個是調(diào)用方法
},
到此這篇關于使用VUE實現(xiàn)一鍵復制內(nèi)容功能的文章就介紹到這了,更多相關VUE實現(xiàn)一鍵復制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了Vue如何使用jsmind實現(xiàn)生成腦圖,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下2024-03-03
vue實現(xiàn)給某個數(shù)據(jù)字段添加顏色
這篇文章主要介紹了vue實現(xiàn)給某個數(shù)據(jù)字段添加顏色方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Element-UI?el-table對循環(huán)產(chǎn)生的空白列賦默認值方式
這篇文章主要介紹了Element-UI?el-table對循環(huán)產(chǎn)生的空白列賦默認值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue中的style樣式如何動態(tài)綁定，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
開發(fā)過程中我們會經(jīng)常遇到一些復雜的頁面,而這些頁面大部分由一個個小部分組合起來的,而且不同頁面中可能有些部分是一樣的,所以我們通常會將這些部分封裝成組件,在Vue中,我們可以使用components組件(模板)來實現(xiàn),本文就來詳細的說一說Vue3中的component組件2023-08-08
vue使用pdf-dist實現(xiàn)pdf預覽以及水印添加
這篇文章主要為大家詳細介紹了vue如何使用pdf-dist實現(xiàn)pdf預覽以及水印添加的功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-10-10
本篇文章主要介紹了Vue學習筆記進階篇之vue-router安裝及使用方法，具有一定的參考價值，有興趣的可以了解一下2017-07-07
Vue中的Object.defineProperty全面理解
這篇文章主要介紹了Vue中的Object.defineProperty全面理解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了詳解使用mpvue開發(fā)github小程序總結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
本篇文章主要介紹了詳解vue-cli 腳手架項目-package.json，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07