平时我们在需要使用数据的时候难免会遇到比较长的内容, 这时有些内容比较长, 复制起来非常不方便, 甚至会复制内容的前后空格影响到后续的操作, 这时候一个一键复制的功能的话用户体验感会提升不少!
效果
页面代码 (这里是使用element-ui里面的表格列)
<el-table-column
prop="id"
label="id"
width="120"
align="center"
show-overflow-tooltip
>
<template slot-scope="scope">
<span
class="one-row"
style="color: #007aff; cursor: pointer;"
@click="copyText(scope.row.id)"
>
<i class="el-icon-document-copy"></i>
{{ scope.row.id }}
</span>
</template>
</el-table-column>
函数代码 (这里是封装了一个函数 可以在需要用到的页面引入)
export function copyText(text) {
let oInput
if (document.getElementById('copyInput')) {
oInput = document.getElementById('copyInput')
} else {
oInput = document.createElement('input')
}
oInput.value = text
oInput.id = 'copyInput'
oInput.className = 'copy-input'
document.body.appendChild(oInput)
oInput.select() // 选择对象;
document.execCommand('Copy') // 执行浏览器复制命令
this.$message.success('复制成功!')
}
注意: 在 <template /> 里使用函数需要在页面的methods里注册函数