vue中实现点击图标复制功能

HTML

<template slot-scope="scope">
	<div class="tradeId">
		<span data-clipboard-action="copy" class="copy" :data-clipboard-text="scope.row.transaction_id" @click="copyId">
			<el-tooltip v-show="!tooltipVisible" class="item" effect="dark" content="点击复制" placement="top-start">
            	<i class="el-icon-document-copy"></i>
            </el-tooltip>
            <el-tooltip v-show="tooltipVisible" class="item" effect="dark" content="复制成功" placement="right">
            	<i class="el-icon-document-copy" @mouseout="tooltipView"></i>
			</el-tooltip>
		</span>
		<span class="tradeIdShow" @click="tradeDetail(scope.row.transaction_id)">{{scope.row.transaction_id}}</span>
	</div>
</template>

JS

copyId () {
      var clipboard = new Clipboard('.copy')
      clipboard.on('success', e => {
        this.tooltipVisible = true
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 释放内存
        clipboard.destroy()
      })
},
// 复制之后鼠标离开事件
tooltipView () {
	this.tooltipVisible = false
},

SCSS

.tradeId{
    color: #409EFF;
    cursor: pointer;
    i{
        color: #222;
        margin-right: 10px;
    }
}
.tradeIdShow{
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	width: 480px;
	display: inline-block;
}