npm install --save clipboard

<template>
    <span>{{ code }}</span>
    <i
    class="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>
    <i
    id="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()
   })
  }