vue
<template slot-scope="{row}">
<el-popover placement="top" trigger="hover">
<template>
<div v-html="row.name" @dblclick="copyToClipboard(row.name)"></div>
</template>
<div slot="reference" class="tab-content" @dblclick="copyToClipboard(row.name)">
{{ row.name}}
</div>
</el-popover>
</template>
style
<style>
.tab-content {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
function
copyToClipboard(text) {
// 创建一个文本域元素
const textArea = document.createElement("textarea");
// 设置文本域的内容为需要复制的文本
textArea.value = text;
// 将文本域添加到DOM元素中(需要可见的DOM元素,但可以不显示)
document.body.appendChild(textArea);
// 选中文本域的内容
textArea.select();
try {
// 执行复制命令
document.execCommand('copy');
this.$notify({
title: '复制成功',
type: 'success',
duration: 2000
})
} catch (err) {
console.error('复制失败', err);
}
// 移除文本域
document.body.removeChild(textArea);
}