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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于vue实现点击复制到粘贴板的详细内容...