使用navigator.clipboard.readtext开发的时候有用,编译后测试却不生效

  • 当然，navigator.clipboard.writeText复制也不会生效~

原因

  • 原因就是在本地的时候都是安全域名，编辑后在服务器上测试的时候可能使用的就是不安全域名了（比如http）
  • 安全域包括本地访问与开启TLS安全认证的地址，如 https 协议的地址、127.0.0.1 或 localhost 。

解决

  1. 使用clipboard.js,官网https://clipboardjs.com/，具体怎么用看https://www.npmjs.com/package/clipboard

  2. 使用window.isSecureContext判断集合document.execCommand使用（不过document.execCommand废弃了,不推荐使用)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    function copyValue = (value) => {
      value = value + "";
      if(window.isSecureContext){
        navigator.clipboard.writeText(value).then(res=>{
          message.success('复制成功');
        })
      }
        //不安全域使用
        else{
        const textArea = document.createElement('textarea');
        document.body.appendChild(textArea);
        textArea.textContent = value;
        //选择
        textArea.select();
        //复制
        document.execCommand && document.execCommand('copy');
        message.success('复制成功');
      }
    }