navigator.clipboard失效问题

问题描述：

在使用Chrome DevTools进行调试时，发现控制台执行navigator.clipboard返回undefined，影响了复制功能的开发和调试。

解决方案：

• 分析：此问题是由于在非安全域环境下，浏览器限制了对navigator.clipboard的访问。安全域包括https协议地址、127.0.0.1及localhost等。

• 实施策略：

  • 实现了一套兼容性解决方案，即在安全域下直接使用navigator.clipboard.writeText()方法提升复制操作的效率；
  • 在非安全域环境下，则回退至使用document.execCommand('copy')作为备选方案，确保在所有环境下复制功能的可用性。

• 成果：经过调整，复制功能现在能在各种环境下稳定工作，提升了开发和调试的便利性。

/**
 * v-copy
 * 复制某个值至剪贴板
 * 接收参数：string类型/Ref<string>类型/Reactive<string>类型
 */
import type { Directive, DirectiveBinding } from "vue";
import { ElMessage } from "element-plus";
interface ElType extends HTMLElement {
  copyData: string | number;
  __handleClick__: any;
}
const copy: Directive = {
  mounted(el: ElType, binding: DirectiveBinding) {
    el.copyData = binding.value;
    el.addEventListener("click", handleClick);
  },
  updated(el: ElType, binding: DirectiveBinding) {
    el.copyData = binding.value;
  },
  beforeUnmount(el: ElType) {
    el.removeEventListener("click", el.__handleClick__);
  }
};

async function handleClick(this: any) {
  try {
    if (navigator.clipboard && window.isSecureContext) {
      await navigator.clipboard.writeText(this.copyData);
    } else {
      const textArea = document.createElement("textarea");
      textArea.value = this.copyData;
      textArea.style.position = "absolute";
      textArea.style.opacity = "0";
      textArea.style.left = "-999999px";
      textArea.style.top = "-999999px";
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      if (!document.execCommand('copy')) {
        throw new Error("Copy command failed");
      }
      textArea.remove();
    }
    ElMessage({
      type: "success",
      message: "复制成功"
    });
  } catch (error) {
    console.error("复制失败：", error);
    ElMessage({
      type: "error",
      message: "复制失败"
    });
  }
}


export default copy;