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