js实现点击一键复制文本

一、功能描述

点击按钮，实现一键复制div元素中的文本内容，并且可以实现粘贴。
为了体现出粘贴功能，添加一个input框，精赋值的内容粘贴到input框里

二、代码实现

html部分

<div style="margin: 50px">
    <el-button type="primary" @click="copyClick">点击一键复制</el-button>
    <div class="testDiv">
      这是一段等待复制的文字这是一段等待复制的文字这是一段等待复制的文字
    </div>
    <el-input v-model="val" style="width:500px" />
</div>

js部分

export default {
    
    
  data() {
    
    
    return {
    
    
      val: ''
    }
  },
  methods: {
    
    
    copyClick() {
    
    
      const input = document.createElement('input') // 创建input对象
      const testDiv = document.querySelector('.testDiv') // 获取需要复制文字的容器
      input.value = testDiv.innerText // 设置复制内容
      document.body.appendChild(input) // 添加临时实例
      input.select() // 选择实例内容
      document.execCommand('Copy') // 执行复制
      document.body.removeChild(input) // 删除临时实例
      this.$message.success('复制成功！')
    }
  }
}

三、效果演示

四、其他

代码中涉及的样式只是单纯为了演示定义的，主要注重js部分的实现方法。欢迎参考。