vue2項(xiàng)目中如何使用clipboard復(fù)制插件
更新時(shí)間：2024年07月27日 08:53:16 作者：小影_8978
這篇文章主要介紹了vue2項(xiàng)目中如何使用clipboard復(fù)制插件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue2使用clipboard復(fù)制插件
需求，點(diǎn)擊頁(yè)面中的某一個(gè)按鈕，復(fù)制文字。
npm install clipboard --save
- 在組件中使用
import Clipboard from 'clipboard'
- html中的按鈕
<div ref="main" class="main">
<button @click="copy">copy</button>
</div>- js的代碼
.main容器，可以是任何頁(yè)面上的容器
copy(code) {
let clipboard = new Clipboard(".main", {
text() {
// console.log(trigger);
//返回字符串
return code;
},
});
// 復(fù)制成功
clipboard.on("success", () => {
this.Message('You have successfully copied the code. Please paste in game to redeem.')
clipboard.destroy();
});
},【插件vue-clipboard2】復(fù)制文本
一個(gè)小插件【vue-clipboard2】，在vue項(xiàng)目中，有場(chǎng)景是需要點(diǎn)擊按鈕復(fù)制文本，使用這個(gè)插件可以輕松復(fù)制信息到剪切板中。
安裝插件
npm i vue-clipboard2
引入到項(xiàng)目工程
在入口文件 mian.js 中
import Vue from 'vue' import VueClipBoard from 'vue-clipboard2' // ... Vue.use(VueClipBoard) // ...
頁(yè)面應(yīng)用
- v-clipboard:copy=“copyTxt” ， 復(fù)制內(nèi)容
- v-clipboard:success=“copySuc”，復(fù)制成功后的鉤子函數(shù)
- v-clipboard:error=“onError” ，復(fù)制失敗的鉤子函數(shù)
<template>
<el-button
type="primary"
v-clipboard:copy="copyTxt"
v-clipboard:success="copySuc">
點(diǎn)我復(fù)制
</el-button>
</template>
export default {
data() {
return {
copyTxt:'我是復(fù)制的內(nèi)容！'
}
},
methods:{
copySuc() {
return this.$message({
message: '復(fù)制成功',
type: 'success',
})
},
}
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue和react中關(guān)于插槽詳解，slot插槽是Vue對(duì)組件嵌套這種擴(kuò)展機(jī)制的稱謂，在react可以也這樣稱呼，但是并不很常見(jiàn)。不過(guò)叫slot確實(shí)很形象2022-08-08
這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)頁(yè)面的幾種常用方法,vue跳轉(zhuǎn)頁(yè)面有好幾種不同方法,文中通過(guò)代碼將實(shí)現(xiàn)的方法介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10
javascript中Set、Map、WeakSet、WeakMap區(qū)別
這篇文章主要介紹了javascript中Set、Map、WeakSet、WeakMap區(qū)別,需要的朋友可以參考下2022-12-12
Vue觸發(fā)input選取文件點(diǎn)擊事件操作
這篇文章主要介紹了Vue觸發(fā)input選取文件點(diǎn)擊事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue-cli項(xiàng)目中img如何使用require動(dòng)態(tài)獲取圖片
這篇文章主要介紹了vue-cli項(xiàng)目中img如何使用require動(dòng)態(tài)獲取圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-09-09
這篇文章主要介紹了vue之Element-Ui輸入框顯示與隱藏方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue使用<Suspense/>實(shí)現(xiàn)圖片加載組件
Suspense是Vue的內(nèi)置組件,用于管理異步組件的加載狀態(tài),包括等待、出錯(cuò)和最終渲染,它通過(guò)兩個(gè)插槽（default和fallback）來(lái)實(shí)現(xiàn)這一功能,感興趣的可以了解一下2026-01-01
Vue.js中this如何取到data和method里的屬性詳解
methods屬性是一個(gè)對(duì)象,通常我們會(huì)在這個(gè)對(duì)象中定義很多的方法,下面這篇文章主要給大家介紹了關(guān)于Vue.js中this如何取到data和method里的屬性,需要的朋友可以參考下2022-12-12
vuex 解決報(bào)錯(cuò)this.$store.commit is not a function的方法
這篇文章主要介紹了vuex 解決報(bào)錯(cuò)this.$store.commit is not a function的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
vue3+vite+JS使用Echarts封裝一個(gè)餅圖完整代碼(父子組件聯(lián)動(dòng))
在Vue中繪制餅圖有多種方式,其中最常用的是使用第三方圖表庫(kù),如ECharts、Chart.js等,下面這篇文章主要介紹了vue3+vite+JS使用Echarts封裝一個(gè)餅圖(父子組件聯(lián)動(dòng))的相關(guān)資料,需要的朋友可以參考下2026-03-03