clipboard在vue中的使用的方法示例
更新時(shí)間：2018年10月19日 11:16:05 作者：gorkys
這篇文章主要介紹了clipboard在vue中的使用的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
簡(jiǎn)介
頁(yè)面中用 clipboard 可以進(jìn)行復(fù)制粘貼，clipboard能將內(nèi)容直接寫(xiě)入剪切板
安裝
npm install --save clipboard
使用方法一
<template>
<span>{{ code }}</span>
<i
class="el-icon-document"
title="點(diǎn)擊復(fù)制"
@click="copyActiveCode($event,code )"/>
</template>
// methods
copyActiveCode(e, text) {
const clipboard = new Clipboard(e.target, { text: () => text })
clipboard.on('success', e => {
this.$message({ type: 'success', message: '復(fù)制成功' })
// 釋放內(nèi)存
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持復(fù)制
this.$message({ type: 'waning', message: '該瀏覽器不支持自動(dòng)復(fù)制' })
// 釋放內(nèi)存
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
clipboard.onClick(e)
}
使用方法二
<template>
<span>{{ code }}</span>
<i
id="tag-copy" <-- 作為選擇器的標(biāo)識(shí)使用用class也行 -->
:data-clipboard-text="code" <-- 這里放要復(fù)制的內(nèi)容 -->
class="el-icon-document"
title="點(diǎn)擊復(fù)制"
@click="copyActiveCode($event,code)"/>
</template>
// methods
copyActiveCode() {
const clipboard = new Clipboard("#tag-copy")
clipboard.on('success', e => {
this.$message({ type: 'success', message: '復(fù)制成功' })
// 釋放內(nèi)存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持復(fù)制
this.$message({ type: 'waning', message: '該瀏覽器不支持自動(dòng)復(fù)制' })
// 釋放內(nèi)存
clipboard.destroy()
})
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue2.0在IE11版本瀏覽器中的兼容性問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
我們?cè)谇岸碎_(kāi)發(fā)中經(jīng)?？吹?visible.sync這種修飾符，很多人不知道這是干什么的，在使用ElementUI的時(shí)候，里面有個(gè)彈窗el-dialog組件的時(shí)候會(huì)有用到:visible.sync，今天小編帶領(lǐng)大家學(xué)習(xí)下:visible.sync 的作用，感興趣的朋友一起看看吧2022-11-11
基于Vue3實(shí)現(xiàn)印章徽章組件的示例代碼
這篇文章主要介紹了如何利用vue3實(shí)現(xiàn)簡(jiǎn)單的印章徽章控件，文中通過(guò)示例代碼講解詳細(xì)，需要的朋友們下面就跟隨小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Ant?Design-vue?解決input前后空格問(wèn)題(推薦)
最近做項(xiàng)目遇到這樣一個(gè)問(wèn)題輸入框不允許有前后空格但字符中間可以有空格，怎么解決這個(gè)問(wèn)題呢，接下來(lái)小編把a(bǔ)nt?Design-vue?解決input前后空格問(wèn)題的實(shí)現(xiàn)代碼分享給大家，感興趣的朋友一起看看吧2022-10-10
vue實(shí)現(xiàn)商品詳情頁(yè)功能之商品選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品詳情頁(yè)功能之商品選項(xiàng)卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
Vue渲染器如何對(duì)節(jié)點(diǎn)進(jìn)行掛載和更新
這篇文章主要介紹了Vue 的渲染器是如何對(duì)節(jié)點(diǎn)進(jìn)行掛載和更新的,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Vuex的store中的Module用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-01-01
vue實(shí)現(xiàn)表格增刪改查效果的實(shí)例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)增刪改查效果的實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Vue的v-model的幾種修飾符.lazy,.number和.trim的用法說(shuō)明
這篇文章主要介紹了Vue的v-model的幾種修飾符.lazy,.number和.trim的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
ant design vue動(dòng)態(tài)循環(huán)生成表單以及自定義校驗(yàn)規(guī)則詳解
這篇文章主要介紹了ant design vue動(dòng)態(tài)循環(huán)生成表單以及自定義校驗(yàn)規(guī)則詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01