clipboard在vue中的使用的方法示例
更新時間：2018年10月19日 11:16:05 作者：gorkys
這篇文章主要介紹了clipboard在vue中的使用的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
簡介
頁面中用 clipboard 可以進(jìn)行復(fù)制粘貼，clipboard能將內(nèi)容直接寫入剪切板
安裝
npm install --save clipboard
使用方法一
<template>
<span>{{ code }}</span>
<i
class="el-icon-document"
title="點擊復(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: '該瀏覽器不支持自動復(fù)制' })
// 釋放內(nèi)存
clipboard.off('error')
clipboard.off('success')
clipboard.destroy()
})
clipboard.onClick(e)
}
使用方法二
<template>
<span>{{ code }}</span>
<i
id="tag-copy" <-- 作為選擇器的標(biāo)識使用用class也行 -->
:data-clipboard-text="code" <-- 這里放要復(fù)制的內(nèi)容 -->
class="el-icon-document"
title="點擊復(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: '該瀏覽器不支持自動復(fù)制' })
// 釋放內(nèi)存
clipboard.destroy()
})
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
平常使用Vue開發(fā)時,一個項目中多個地方需要用到的相同組件通常我們會封裝為一個公共組件,所以我們可以將封裝好的組件打包發(fā)布至npm,本文主要介紹了vue組件發(fā)布成npm包,具有一定的參考價值,感興趣的可以了解一下2024-01-01
本篇文章主要介紹了淺談Vue 初始化性能優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了vue 命名視圖的相關(guān)知識，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
Nginx是一款輕量級的Web服務(wù)器/反向代理服務(wù)器及電子郵件（IMAP/POP3）代理服務(wù)器,在BSD-like 協(xié)議下發(fā)行,下面這篇文章主要給大家介紹了關(guān)于ubuntu中利用nginx部署vue項目的相關(guān)資料,需要的朋友可以參考下2022-02-02
解決vue偵聽器watch,調(diào)用this時出現(xiàn)undefined的問題
這篇文章主要介紹了解決vue偵聽器watch,調(diào)用this時出現(xiàn)undefined的問題，具有很好的參考2020-10-10
今天小編就為大家分享一篇vue-resource:jsonp請求百度搜索的接口示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue項目中有一些方法需要在多個頁面調(diào)用,但為了避免在每個頁面都import進(jìn)來,可以把方法加到原型上去,這樣在每個組件中都能使用了,下面這篇文章主要給大家介紹了關(guān)于配置vue全局方法的兩種方式,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細(xì)介紹了Vue+Openlayers自定義軌跡動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了vue引入css文件導(dǎo)致全局污染的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
關(guān)于vue v-for 循環(huán)問題(一行顯示四個,每一行的最右邊那個計算屬性)
這篇文章主要介紹了關(guān)于vue v-for 循環(huán)問題(一行顯示四個,每一行的最右邊那個計算屬性),需要的朋友可以參考下2018-09-09