前端实现点击复制小功能

问题描述

今天写项目的时候发现很多地方需要用到一个小小测复制logo，点击之后就能实现复制前面的文本

首相想到的就是document.execCommand(‘copy’)
但是翻了翻MDN，
这都已经废弃了啊，所以为了以后还能用，我只能去换一个方法，又找到一个新的

通过log能看出这个api的一些方法

再看MDN

这意思就是直接往剪切板里面塞文本信息就完事儿了

export async function copy (text) {
  try {
    await navigator.clipboard.writeText(text) // val就是要复制的值
    this.$message({
      type: 'success',
      message: '复制成功'
    })
  } catch (err) {
    console.error('Failed to copy: ', err)
  }
}

注册成全局之后就可以到处调用了

 <span id="top_name">hive_test_dd</span> 
 <el-button icon="el-icon-copy-document" @click="copyTopName" ></el-button>

// 复制头部名称
    copyTopName() {
      console.log('haha')
      let top_name = document.getElementById('top_name')
      const text = top_name.innerText
      this.$copy(text)
    }