使用VUE實(shí)現(xiàn)一鍵復(fù)制內(nèi)容功能
更新時(shí)間：2023年04月25日 09:59:58 作者：wendycwb
這篇文章主要介紹了使用VUE實(shí)現(xiàn)一鍵復(fù)制內(nèi)容功能,功能就是當(dāng)我們點(diǎn)擊復(fù)制按鈕時(shí)，會(huì)提示“復(fù)制成功”，這樣復(fù)制的內(nèi)容就可以在其他地方使用了，感興趣的朋友可以學(xué)習(xí)一下
接到一個(gè)需要，需要在pc端實(shí)現(xiàn)一鍵復(fù)制粘貼功能，如圖所示：
當(dāng)我點(diǎn)擊復(fù)制按鈕時(shí)，會(huì)提示“復(fù)制成功”，這樣復(fù)制的內(nèi)容就可以在其他地方使用了 具體實(shí)現(xiàn)方法如下： 我寫了一個(gè)公共的方法
在調(diào)用之前需要先引入，當(dāng)然可以全局引入，也可以局部引入，因?yàn)槲抑挥幸粋€(gè)地方用到，所以我是局部引入的：
然后在需要復(fù)制的地方直接調(diào)用這個(gè)方法即可：
代碼參考如下：
//這個(gè)是寫的公共方法
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('復(fù)制成功')
}
export { copyText }
//這個(gè)是引入
import { copyText } from '@/utils/copeText'
copeAddress(data) {
//data表示要復(fù)制的內(nèi)容
copyText(data, this) // 這個(gè)是調(diào)用方法
},
到此這篇關(guān)于使用VUE實(shí)現(xiàn)一鍵復(fù)制內(nèi)容功能的文章就介紹到這了,更多相關(guān)VUE實(shí)現(xiàn)一鍵復(fù)制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能
這篇文章主要為大家詳細(xì)介紹了vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue項(xiàng)目使用高德地圖的定位及關(guān)鍵字搜索功能的實(shí)例代碼(踩坑經(jīng)驗(yàn))
這篇文章主要介紹了vue項(xiàng)目使用高德地圖的定位及關(guān)鍵字搜索功能的實(shí)例代碼，也是小編踩了無數(shù)坑總結(jié)出來的經(jīng)驗(yàn),非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
這篇文章主要介紹了Vue中使用import進(jìn)行路由懶加載的原理分析。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue如何封裝自己的Svg圖標(biāo)組件庫(svg-sprite-loader)
這篇文章主要介紹了vue如何封裝自己的Svg圖標(biāo)組件庫(svg-sprite-loader)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue+echart實(shí)現(xiàn)雙柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
巧用Vue.js+Vuex制作專門收藏微信公眾號(hào)的app
這篇文章主要為大家詳細(xì)介紹了vue自定義指令三步如何實(shí)現(xiàn)數(shù)據(jù)拉取更新,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
vue前端框架vueuse的useScroll函數(shù)使用源碼分析
這篇文章主要為大家介紹了vueuse的useScroll函數(shù)源碼分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue-resource調(diào)用promise取數(shù)據(jù)方式詳解
這篇文章主要介紹了vue-resource調(diào)用promise取數(shù)據(jù)方式詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
如何將iconfont圖標(biāo)引入到vant的Tabbar標(biāo)簽欄里邊
這篇文章主要介紹了如何將iconfont圖標(biāo)引入到vant的Tabbar標(biāo)簽欄里邊，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了在vue中使用jsx語法的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09