簡介
頁面中用 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()
})
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
