vue点击按钮复制输入框内容

1、安装依赖

npm install clipboard --save

2、全局注册(在main.js中)

// 全局注册vue一键复制内容到粘贴板
import Clipboard from 'clipboard'
Vue.prototype.Clipboard = Clipboard

 或者在需要用的组件中引入

import Clipboard from 'clipboard'

3、使用

:data-clipboard-text 绑定的是复制的值 , 要跟输入框绑定的值保持一致

<el-input v-model="formInline.mac" placeholder="mac地址" />
<div class="copyBtn" :data-clipboard-text="formInline.mac" @click="copy">
   <i class="el-icon-document-copy" />
</div>

JS部分

copy() {
      var clipboard = new this.Clipboard('.copyBtn')
      clipboard.on('success', () => {
        this.$message.success('复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$message.error('复制失败')
        clipboard.destroy()
      })
    },