如何用Vue实现点击按钮复制内容到粘贴板的功能？

本文共计450个文字，预计阅读时间需要2分钟。

原文示例：本文为大家分享了Vue实现点击复制到粘贴板的整体代码，供大家参考。具体内容如下：

背景：在业务开发中，遇到需要点击复制内容到粘贴板的需求，记录一下。

效果：关键代码：copyText()

修改后内容：背景：开发过程中，遇到需要复制内容到粘贴板的功能需求，记录以下步骤。

效果：实现复制功能，代码如下：copyText(内容)

本文实例为大家分享了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>

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