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)操作是非常常見的操作之一,需要的朋友可以參考下
一、需求說明
在項(xiàng)目中 點(diǎn)擊按鈕 復(fù)制 某行文本是很常見的 應(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.js 是一套構(gòu)建用戶界面的框架，**只關(guān)注視圖層**，它不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。這篇文章主要介紹了vue 的基本語法和常用指令,需要的朋友可以參考下2019-07-07
Vue2.0用 watch 觀察 prop 變化(不觸發(fā))
本篇文章主要介紹了Vue2.0用 watch 觀察 prop 變化(不觸發(fā))，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細(xì)介紹了vue v-model表單控件綁定的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
vue3實(shí)現(xiàn)搜索項(xiàng)超過n行就折疊的思路詳解
我們?cè)谧隽斜聿樵兊臅r(shí)候，會(huì)有很多查詢項(xiàng)，如何實(shí)現(xiàn)超過n行查詢項(xiàng)的時(shí)候自動(dòng)折疊起來呢？本文給大家分享vue3實(shí)現(xiàn)搜索項(xiàng)超過n行就折疊的思路詳解，感興趣的朋友一起看看吧2022-06-06
vue實(shí)現(xiàn)input框禁止輸入標(biāo)簽
這篇文章主要介紹了vue實(shí)現(xiàn)input框禁止輸入標(biāo)簽，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
淺談Vuex的this.$store.commit和在Vue項(xiàng)目中引用公共方法
這篇文章主要介紹了淺談Vuex的this.$store.commit和在Vue項(xiàng)目中引用公共方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue3環(huán)境安裝以及項(xiàng)目搭建全過程
Vue工程化項(xiàng)目環(huán)境配置還是比較麻煩的,下面這篇文章主要給大家介紹了關(guān)于Vue3環(huán)境安裝以及項(xiàng)目搭建的相關(guān)資料,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
本文主要介紹在vue項(xiàng)目中,遇到數(shù)據(jù)更新但視圖不更新的情況時(shí),無法使用watch監(jiān)聽、無法使用this.$set方法,同時(shí)使用this.$forceUpdate()無效時(shí),所使用的解決方案,需要的朋友可以參考下2024-02-02
詳解Vue、element-ui、axios實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要介紹了Vue、element-ui、axios實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了安裝Vue+webpack出現(xiàn)的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06