vue+js实现复制文字到剪贴板功能

莫宛

已于 2022-08-01 09:30:16 修改

阅读量751

点赞数 1

文章标签： vue.js javascript 前端

于 2022-07-29 15:39:36 首次发布

本文链接：https://blog.csdn.net/qq_43837235/article/details/126055642

版权

前端开发复制剪贴板 input元素文本操作

关键词由CSDN通过智能技术生成

请添加图片描述

方法一：从已有的input节点获取复制内容

<!-- html部分 -->
  <el-row>
    <el-col :span="12">
      <el-form-item label="设备ID:" label-width="90px">
        <input id="equipmentId" class="clear-border" v-model="formData.code" readonly />
        <el-button type="button-text" @click="copyId">复制</el-button>
      </el-form-item>
    </el-col>
  </el-row>

  // js部分
    copyId() {
      document.querySelector("#equipmentId").select();//选择input元素
      document.execCommand("Copy");//执行复制命令
      this.$message.success("复制成功");
    },

方法二：创建虚拟的input节点获取复制内容

<!-- html部分 -->
  <el-row>
    <el-col :span="12">
      <el-form-item label="设备ID:" label-width="90px">
        <span>{{formData.code}}</span>
        <el-button type="button-text" @click="copyData(formData.code)">复制</el-button>
      </el-form-item>
    </el-col>
  </el-row>
// js部分
// data:想要复制的内容
    copyData(data) {
      var input = document.createElement('input') // 创建input元素
      document.body.appendChild(input) // 将input元素挂到body上
      input.setAttribute('value', data) //设置input的value，也就是想要复制的内容
      input.select() // 设置当前input元素被选中
      
      document.execCommand("Copy") //执行复制命令
      
      document.body.removeChild(input) // 清除input元素
      this.$message.success("复制成功")
    },