vue实现点击复制到粘贴板
作者：王博wangbo
这篇文章主要为大家详细介绍了vue实现点击复制到粘贴板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现点击复制到粘贴板的具体代码，供大家参考，具体内容如下
背景： 业务开发中遇到，点击复制内容到粘贴板的需求，记录一下
效果：
关键代码:
copyText() {
const oInput = document.createElement('input')
oInput.value = this.textarea
document.body.appendChild(oInput)
oInput.select()
document.execCommand('Copy')
this.$message({
message: '复制成功',
type: 'success'
})
oInput.remove()
}代码： 以下是完整代码
<template>
<div class="white-body-view">
<el-row>
<el-col :span="22">
<el-input
v-model="textarea"
type="textarea"
resize="none"
:rows="3"
placeholder="请输入内容"
/>
</el-col>
<el-col :span="2">
<el-tooltip class="item" effect="dark" content="复制" placement="top">
<i class="el-icon-document-copy primary-icon" @click="copyText" />
</el-tooltip>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
textarea: '测试内容'
}
},
methods: {
copyText() {
const oInput = document.createElement('input')
oInput.value = this.textarea
document.body.appendChild(oInput)
oInput.select()
document.execCommand('Copy')
this.$message({
message: '复制成功',
type: 'success'
})
oInput.remove()
}
}
}
</script>
<style lang="scss">
.primary-icon {
cursor: pointer;
color: #409eff;
margin-left: 10px;
}
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。