vue復(fù)制內(nèi)容到剪切板代碼實(shí)現(xiàn)
更新時(shí)間：2023年08月23日 08:47:57 作者：敲代碼的TKP
這篇文章主要給大家介紹了關(guān)于vue復(fù)制內(nèi)容到剪切板代碼實(shí)現(xiàn)的相關(guān)資料,在Web應(yīng)用程序中剪貼板(Clipboard)操作是非常常見(jiàn)的操作之一,需要的朋友可以參考下
一、需求說(shuō)明
在項(xiàng)目中 點(diǎn)擊按鈕 復(fù)制 某行文本是很常見(jiàn)的 應(yīng)用場(chǎng)景，在 Vue 項(xiàng)目中實(shí)現(xiàn) 復(fù)制功能 需要借助 vue-clipboard2 插件。
二、代碼實(shí)現(xiàn)
1、安裝 vue-clipboard2 依賴
（ 不行的話可以切換成淘寶鏡像源 npm config set registry https://registry.npm.taobao.org ）
npm install --save vue-clipboard2
2、在 main.js 文件中全局引入插件
示例代碼如下：
import Vue from 'vue' import VueClipBoard from 'vue-clipboard2' Vue.use(VueClipBoard)
3、在 vue 文件中使用
<template>
<div>
<el-button
@click="onCopy"
>復(fù)制</el-button
>
</div>
</template>
<script>
export default {
data() {
return {
text: "這是一段復(fù)制的文本",
};
},
methods: {
onCopy() {
this.$copyText(this.text).then(
e=>{
console.log('復(fù)制成功：', e);
},
e=>{
console.log('復(fù)制失?。?, e);
}
)
}
}
};
</script>總結(jié)
到此這篇關(guān)于vue復(fù)制內(nèi)容到剪切板代碼實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue復(fù)制內(nèi)容到剪切板內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue后端傳文件流轉(zhuǎn)化成blob對(duì)象,前端點(diǎn)擊下載返回undefined問(wèn)題
這篇文章主要介紹了vue后端傳文件流轉(zhuǎn)化成blob對(duì)象,前端點(diǎn)擊下載返回undefined問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue使用jsMind思維導(dǎo)圖的實(shí)戰(zhàn)指南
jsMind是一個(gè)顯示/編輯思維導(dǎo)圖的純javascript類庫(kù),其基于 html5的canvas進(jìn)行設(shè)計(jì),這篇文章主要給大家介紹了關(guān)于vue使用jsMind思維導(dǎo)圖的相關(guān)資料,需要的朋友可以參考下2023-01-01
本文主要介紹了使用PM2運(yùn)行Vue項(xiàng)目的具體步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
Vue.js中關(guān)于偵聽(tīng)器（watch）的高級(jí)用法示例
Vue.js 提供了一個(gè)方法 watch，它用于觀察Vue實(shí)例上的數(shù)據(jù)變動(dòng)。下面這篇文章主要給大家介紹了關(guān)于Vue.js中關(guān)于偵聽(tīng)器（watch）的高級(jí)用法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
解決vue3報(bào)錯(cuò):Unexpected?mutation?of?“xxx“?prop.(eslintvue/no
這篇文章主要給大家介紹了關(guān)于如何解決vue3報(bào)錯(cuò):Unexpected?mutation?of?“xxx“?prop.(eslintvue/no-mutating-props)的相關(guān)資料,文中通過(guò)代碼將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
今天小編就為大家分享一篇關(guān)于詳解vue-router導(dǎo)航守衛(wèi)，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單錄入小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
vue任意關(guān)系組件通信與跨組件監(jiān)聽(tīng)狀態(tài)vue-communication
這篇文章主要介紹了vue任意關(guān)系組件通信與跨組件監(jiān)聽(tīng)狀態(tài)vue-communication，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要介紹了vue父組件異步傳遞props值,子組件接收不到解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
如何使用Gitee Pages服務(wù) 搭建Vue項(xiàng)目
這篇文章主要介紹了如何使用Gitee Pages服務(wù) 搭建Vue項(xiàng)目，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10