簡介

頁面中用 clipboard 可以進(jìn)行復(fù)制粘貼，clipboard能將內(nèi)容直接寫入剪切板

安裝

npm install --save clipboard

使用方法一

<template><span>{{ code }}</span><iclass="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><iid="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()})}

總結(jié)

以上是生活随笔為你收集整理的clipboard 在 vue 中的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。