vue2項(xiàng)目中如何使用clipboard復(fù)制插件
更新時(shí)間：2024年07月27日 08:53:16 作者：小影_8978
這篇文章主要介紹了vue2項(xiàng)目中如何使用clipboard復(fù)制插件方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue2使用clipboard復(fù)制插件
需求，點(diǎn)擊頁面中的某一個(gè)按鈕，復(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ù)制文本
一個(gè)小插件【vue-clipboard2】，在vue項(xià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ī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)文章
詳解mpvue小程序中怎么引入iconfont字體圖標(biāo)
這篇文章主要介紹了詳解mpvue小程序中怎么引入iconfont字體圖標(biāo)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue2.x element-ui實(shí)現(xiàn)pc端購物車頁面demo
這篇文章主要為大家介紹了vue2.x element-ui實(shí)現(xiàn)pc端購物車頁面demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了ant-design-vue按需加載的坑的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
詳解vue-router 2.0 常用基礎(chǔ)知識點(diǎn)之router.push()
本篇文章主要介紹了vue-router 2.0 常用基礎(chǔ)知識點(diǎn)之router.push()，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
Vue-resource實(shí)現(xiàn)ajax請求和跨域請求示例
本篇文章主要介紹了Vue-resource實(shí)現(xiàn)ajax請求和跨域請求示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了vue上傳圖片到oss的方法示例（圖片帶有刪除功能），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
工作中日常筆記,vue中使用swiper插件,在pc端和h5端也是常用的插件,下面這篇文章主要給大家介紹了關(guān)于vue3中使用swiper的完整版教程,需要的朋友可以參考下2023-04-04
Vue2.x Todo之自定義指令實(shí)現(xiàn)自動聚焦的方法
我們希望用戶雙擊 todo 進(jìn)入編輯狀態(tài)后輸入框自動獲取焦點(diǎn)，而不是需要先手動點(diǎn)一下。這篇文章主要介紹了Vue 2.x Todo之自定義指令實(shí)現(xiàn)自動聚焦,非常具有實(shí)用價(jià)值，需要的朋友可以參考下2019-01-01
Vue 的組件作用域都是孤立的，不允許在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。必須使用特定的方法才能實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞。下面這篇文章主要給大家介紹了關(guān)于vue中各組件之間傳遞數(shù)據(jù)的方法示例，需要的朋友可以參考學(xué)習(xí)。2017-07-07