实现点击复制文本的操作

        最近在做前端项目时，遇到了复制文本的操作，在这里记录一下吧。

HTML代码

// 这里是前端展示的文本，也是需要复制的地方
<span class="impel-value">{{ linksData.longLink }}</span>

// 我们需要通过input标签来实现复制功能，但是input标签不会在前端展示
<input :value="linksData.longLink" id="input" cols="30" rows="10" />

// 通过此按钮实现复制，要传入input标签的id值
<van-button type="info" size="small" @click="copyText('input')">复制</van-button>

// 在style中将input框隐藏
#input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -10;
}

JS方法

copyText(id) {
    let input = document.getElementById(id);
    // select()方法用于选取文本域中的内容，但只能用于input type="text"和"textarea"
    input.select();
    // 执行浏览器的复制命令
    document.execCommand("copy");
    this.$toast('复制成功');
}