Element-ui的双击复制插件(Vue,也可适用于表格)

安装

npm install --save vue-clipboard2

引入

import Vue from 'vue'

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

表格中使用

@cell-dblclick="celldblclick"

 <el-table :data="topics" :stripe="true"  border max-height="550"   style="width: 100%" @sort-change="sortChange" :sort-orders="['ascending', 'descending']"
                      cell-class-name="cell"       @cell-dblclick="celldblclick" >
	<el-table-column width="100" type="index"></el-table-column>
</el-table>

celldblclick (row, column, cell, event) {
   this.$copyText(row[column.property]).then(e=> {
       this.onCopy()
   }, function (e) {
       this.onError()
   })
},
onCopy() {
   this.$notify({title: '成功', message: '复制成功！', type: 'success', offset: 50, duration: 2000})
},
onError() {
   this.$notify({title: '失败', message: '复制失败！', type: 'error', offset: 50, duration: 2000})
}

自定义使用

<i @dblclick="celldblclick(userInfo.id)">{{userInfo.id}}</i>

celldblclick (data) {
    this.$copyText(data).then(e=> {
        this.onCopy()
    }, function (e) {
        this.onError()
    })
},
onCopy() {
    this.$notify({title: '成功', message: '复制成功！', type: 'success', offset: 50, duration: 2000})
},
onError() {
    this.$notify({title: '失败', message: '复制失败！', type: 'error', offset: 50, duration: 2000})
},

效果

官网

 👉 官网