vue实现点击复制(组件使用的elemnet-ui)

效果图:

copy.gif

使用模块: clipboard

npm install clipboard

html

          
            
点击复制
            
              {{ action+scope.row.src }}
          

Script

import Clipboard from 'clipboard'

copy() {
      var clipboard = new Clipboard('.tag-read')
      clipboard.on('success', e => {
        this.$message({
          message: '复制成功',
          type: 'success'
        })
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    }
  }

代码示例:

image.png

image.png