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