---

提示：以下是本篇文章正文内容，下面案例可供参考

需求

实现复制内容的功能，点击后面复制按钮复制前面内容

使用步骤

1、模板文件代码

<template>
  <div class="box">
    <ul class="info-list">
      <li><label>户 名：</label><span id="accountName">xxxxxxxxxxx股份有限公司</span></li>
      <li><label>账 号：</label><span id="bankNumber">1234567890123456</span></li>
      <li><label>银 行：</label><span id="bankName">上海银行</span></li>
      <li><label>支 行：</label><span id="subBranchName">上海银行天津分行</span></li>
      <li><label>联行号：</label><span id="interBankNumber">888888</span></li>
    </ul>
    <ul class="btn-copy-list">
      <li><button type="button"><span @click="handleCopy('accountName')">复制</span></button></li>
      <li><button type="button"><span @click="handleCopy('bankNumber')">复制</span></button></li>
      <li><button type="button"><span @click="handleCopy('bankName')">复制</span></button></li>
      <li><button type="button"><span @click="handleCopy('subBranchName')">复制</span></button></li>
      <li><button type="button"><span @click="handleCopy('interBankNumber')">复制</span></button></li>
    </ul>
  </div>
</template>

2、script代码

模板中的复制按钮，都调handleCopy方法，并传入dom的id，也就是被复制内容的id

<script>
import { copyDomText } from '../utils/common'
export default {
  name: 'Copy',
  setup(props) {
    const handleCopy = (domid) => {
      copyDomText(domid)
    }
    return {
      handleCopy
    }
  }
}
</script>

3、复制代码函数

在utils/common.js中写入下面方法，并导出，共前端调用，你可以复制到任何地方

/**
 * @description 复制
 * @param {*} id DOM ID
 */
export function copyDomText (id) {
  const node = document.getElementById(id)
  if (node) {
    let createRange = document.createRange()
    createRange.selectNodeContents(document.getElementById(id))
    const selection = document.getSelection()
    selection.removeAllRanges()
    selection.addRange(createRange)
    document.execCommand('Copy')
    selection.removeAllRanges()
    alert('已复制')
  }
}

4、效果