点击按钮实现复制某个值的功能

如图所示,县级复制按钮,复制被打了马赛克的一个验证码,涉及到的功能代码如下

点击按钮实现效果:

<span class="code-number" id="code">
{{
  state.homeIndex?.codes
}}
</span>
<textarea class="temp-input" id="temp-input"></textarea>
<div class="btn-copy" @click="copyText()">复制</div>

copyText() {
    const code = (document.getElementById("code") as HTMLElement).innerText;
    const tempInput = document.getElementById("temp-input") as any;
    tempInput.value = code;
    tempInput.select();
    document.execCommand("copy");
    ElMessage.success({
      message: "复制成功",
      type: "success",
    });
}

感悟:首先是拿值,这里有数据层的绑定可以不用使用节点去拿值,然后需要一个在html中的textarea节点,给其赋值为刚才拿到的值,再使用如下代码实现复制功能

tempInput.value = code;
tempInput.select();
document.execCommand("copy");

然后再来一句提示语言

ElMessage.success({
      message: "复制成功",
      type: "success",
    });