复制到剪贴板在 VueJS 中的 Chrome 浏览器上不起作用

Question

在我的 VueJS 应用程序中，我有一个组件可以通过 link 单击

将基础 URL 复制到剪贴板

<a @click="copyURL" ref="mylink">
            <img class="social_icon" src="/images/game/copy-fr.png" alt="Copy icon"
          /></a>
          <input type="text" class="copyurl_txt" v-model="base" ref="text" />
          <div v-if="flash" v-text="flash"></div>

我的脚本中有以下方法，

copyURL() {
      this.$refs.text.select();
      document.execCommand("copy");
      this.flash = "lien copié dans le presse-papiers";
    },

这在我的 Firefox 浏览器上运行良好，但在我的 Chrome 上这不会将 link 复制到剪贴板...

Answer 1

那是因为 input 值无法以同样的方式 select。这可能是每个浏览器处理不同的怪癖之一。那个会发生。我的建议是不要尝试在这里重新发明轮子。我构建了一个自定义 JS class 仅用于复制适用于所有主要浏览器（包括 IE11）的文本，但这是一项糟糕的工作。由于版权问题，我什至无法分享。

所以只需使用像 https://github.com/Inndy/vue-clipboard2 这样的包就可以了。

如果这不是一个选项，您必须考虑在运行时创建一个带有不可见 table 的虚拟 DOM，然后您可以 select 并自动复制。

Answer 2

<a @click="copyURL" ref="mylink">
            <img class="social_icon" src="/images/game/copy-fr.png" alt="Copy icon"
          /></a>

你的方法应该如下所示，

copyURL() {
            const el = document.createElement('textarea');  
            el.value = window.location.origin;                                 
            el.setAttribute('readonly', '');                
            el.style.position = 'absolute';                     
            el.style.left = '-9999px';                      
            document.body.appendChild(el);                  
            const selected =  document.getSelection().rangeCount > 0  ? document.getSelection().getRangeAt(0) : false;                                    
            el.select();                                    
            document.execCommand('copy');                   
            document.body.removeChild(el);                  
            if (selected) {                                 
              document.getSelection().removeAllRanges();    
              document.getSelection().addRange(selected);   
            }
            this.flash = "lien copié dans le presse-papiers";
        },

如果你想使用不同的值而不是基础 url 那么简单的改变

el.value = window.location.origin;

到

el.value = this.link_url;

或

el.value = "www.yourlink.com";

复制到剪贴板在 VueJS 中的 Chrome 浏览器上不起作用

Copy to clipboard not working on Chrome browser in VueJS

vue.js

copy

clipboard