vue 一键复制

 

1、安装依赖

npm install clipboard --save

2、全局注册

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

3、引入

在哪个组件页面中用到就在哪个组件中引入，放在script标签里：

import Clipboard from 'clipboard'

4、实战演练

我是要点击复制按钮获取输入框里的内容

HTML部分：

其中:data-clipboard-text属性就是要复制的值，所以我直接把输入框的值赋给它了

<div class="title">追踪号码</div>
<el-input v-model="item.tracking_number" placeholder="输入运单号" />
<div class="copyBtn" :data-clipboard-text="item.tracking_number" @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()
    })
},

 

标签：vue,clipboard,一键,输入框,Clipboard,复制,destroy,message
来源： https://www.cnblogs.com/guohanting/p/16194327.html