复制内容到粘贴板

<div class="doctor-dept doctor-dept-special" v-if="item.tradeNo">
  处方号:
  <span class="presc-code-text">{{item.tradeNo}}</span>
  <span class="clipboard-btn" data-clipboard-action="copy" data-clipboard-target=".presc-code-text" @click="handleCopy(item.tradeNo, index)">复制</span>
</div>

methods: {
  /**
       * 处理复制操作的函数，示例中提供了两种复制到剪贴板的方法供选择。
       * @param {string} prescCode 需要被复制的处方码。
       * @returns {Promise<boolean>} 通过异步操作返回一个布尔值，表示复制操作是否成功。
       */
      async handleCopy1(prescCode) {
        // 第一种方式：this.copyToClipboardOne();
        // 第二种方式：this.copyToClipboardTwo();
        const verify = await this.copyToClipboardOne(prescCode);
        // 根据复制结果打印相应的日志
        if (verify) {
          console.log('复制成功！');
        }
        else {
          console.log('复制失败！');
        }
      },
      /**
       * 将指定字符串复制到剪贴板
       * @param {string} str 需要复制的字符串
       * @returns {Promise<void>} 复制成功的Promise，不返回任何内容
       */
      copyToClipboardOne(str) {
        return new Promise((resolve, reject) => {
          // 创建一个不可见的input元素
          let inputEl = document.createElement('input');
          inputEl.value = str;
          inputEl.style.cssText = 'position:absolute;left:-9999px;top:-9999px;';
          inputEl.readOnly = true;  // 避免在iOS上打开键盘
          inputEl.contentEditable = 'true'; // 使得input元素可编辑以利用execCommand('copy')
          document.body.appendChild(inputEl);
          // 选中input中的文本以准备复制
          inputEl.select();
          inputEl.setSelectionRange(0, inputEl.value.length);
          // 尝试执行复制命令
          let isSuccess = document.execCommand('copy');
          inputEl.remove(); // 移除创建的input元素
          if (isSuccess) {
            resolve(void 0); // 复制成功，解决Promise
          }
          else {
            reject(new Error('copy error')); // 复制失败，拒绝Promise
          }
        });
      },
      /**
       * 将指定字符串复制到剪贴板。
       * @param {string} str 需要被复制的字符串。
       * @returns {Promise<boolean>} 返回一个承诺，如果复制成功，则解析为 true，否则为 false。
       */
      copyToClipboardTwo(str) {
        return new Promise((resolve) => {
          // 创建一个临时的文本区域元素
          const el = document.createElement('textarea');
          el.value = str;
          // 隐藏该元素
          el.style.position = 'absolute';
          el.style.left = '-9999px';
          // 防止iOS设备打开键盘
          el.readOnly = true;
          // 允许该元素可编辑，以支持复制操作
          el.contentEditable = 'true';
          // 将临时元素添加到文档体中
          document.body.appendChild(el);
          // 选中文本
          this.selectText(el, 0, str.length);
          // 尝试执行复制命令
          if (document.execCommand('copy')) {
            // 如果复制成功，移除临时元素
            document.body.removeChild(el);
            resolve(true);
          }
          else {
            resolve(false);
          }
        });
      },
      /**
       * 选择文本。该函数用于在可编辑元素中选择文本。根据浏览器的不同（特别是iOS与非iOS的区别），使用不同的方法来实现文本选择。
       * @param {HTMLElement} editableEl - 可编辑元素，通常是input或textarea等。
       * @param {number} selectionStart - 文本选择的起始位置。
       * @param {number} selectionEnd - 文本选择的结束位置。
       */
      selectText(editableEl, selectionStart, selectionEnd) {
        // 检查当前浏览器是否为iOS设备上的浏览器
        const isIOS = navigator.userAgent.match(/ipad|iPod|iphone/i);
        if (isIOS) {
          // 在iOS上使用Range和Selection对象来选择文本
          const range = document.createRange();
          range.selectNodeContents(editableEl); // 选择可编辑元素的全部内容

          const selection = window.getSelection();  // 获取当前的文本选择
          selection.removeAllRanges(); // 清除所有已存在的选择范围
          selection.addRange(range); // 添加新的范围
          editableEl.setSelectionRange(selectionStart, selectionEnd);  // 设置具体的选区范围
        }
        else {
          // 在非iOS浏览器上，直接调用元素的select方法来选择文本
          editableEl.select();
        }
      },
}