clipboard 在 vue 中的使用

簡介

頁面中用 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()
      })
    }

複製代碼