前端Ruoyi 一键复制内容

        平时我们在需要使用数据的时候难免会遇到比较长的内容, 这时有些内容比较长, 复制起来非常不方便, 甚至会复制内容的前后空格影响到后续的操作, 这时候一个一键复制的功能的话用户体验感会提升不少!

效果

 页面代码 (这里是使用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里注册函数