簡介

頁面中用 clipboard 可以進行復制粘貼，clipboard能將內容直接寫入剪切板

安裝

npm install --save clipboard

使用方法一

<template>    <span>{{ code }}</span>    <i    class="el-icon-document"    title="點擊復制"    @click="copyActiveCode($event,code )"/></template>// methodscopyActiveCode(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>// methodscopyActiveCode() {   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()   })  }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。