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

效果图:

copy.gif

使用模块: clipboard

npm install clipboard

html

          <el-tooltip placement="top">
            <div slot="content">点击复制</div>
            <span
              style="display:block;cursor:pointer;width:100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
              class="tag-read"
              :data-clipboard-text="scope.row.src"
              @click="copy"
            >
              {{ action+scope.row.src }}</span>
          </el-tooltip>

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