The clipboard is introduced

The appearance of clipboard.js is a good solution to this problem. It is not only small in size, but also very convenient to use. It can be completed in a few lines of code, and can realize the function of copying browser content to the system clipboard with pure JavaScript (no Flash).

The project has been used, I will record the use of the method
The installation

npm install --save clipboard

The introduction of

import ClipboardJS from 'clipboard';

Usage Method 1
<template>
       <span>{{ code }}</span>
       <el-button @click="copyActiveCode($event,code )"</el-button> </template> // methods copyActiveCode(e, text) {const clipboard = new clipboard (e.target, {text: () => text }) clipboard.on('success', e => {
        this.$message({ type: 'success', message: 'Copy successful'}) // Release memory clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
      })
      clipboard.on('error', e => {// Copying this is not supported.$message({ type: 'waning', message: 'This browser does not support automatic replication'}) // Release memory clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
      })
      clipboard.onClick(e)
    }

Copy the code
Usage Method 2

<template>
       <span>{{ codecontant }}</span>
       <i
       id="tag-copy"< span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; white-space: inherit! Important;"codecontant"< span style = "box-sizing: border-box! Important; word-wrap: break-word! Important;"Click copy"
       @click="copyActiveCode($event,code)"/>
</template>
// methods
copyActiveCode() {
      const clipboard = new Clipboard("#tag-copy")
      clipboard.on('success', e => {
        this.$message({ type: 'success', message: 'Copy successful'}) // Destroy clipboard.destroy()}) clipboard.on('error', e => {// Copying this is not supported.$message({ type: 'waning', message: 'This browser does not support automatic replication'} clipboard.destroy()})}Copy the code

I use the second method, feel very convenient, there is no BUG