簡介
成都創(chuàng)新互聯(lián)是專業(yè)的金臺網(wǎng)站建設(shè)公司,金臺接單;提供成都做網(wǎng)站、網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行金臺網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!
頁面中用 clipboard 可以進(jìn)行復(fù)制粘貼,clipboard能將內(nèi)容直接寫入剪切板
安裝
npm install --save clipboard
使用方法一
{{ code }}
// 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)
}
使用方法二
{{ code }}
:data-clipboard-text="code" <-- 這里放要復(fù)制的內(nèi)容 -->
class="el-icon-document"
title="點(diǎn)擊復(fù)制"
@click="copyActiveCode($event,code)"/>
// 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í)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。