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

维纳维·阿努塔拉

在我的 VueJS 应用程序中,我有一个组件可以通过单击链接将基本 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 上这不会将链接复制到剪贴板...

沃尔卡·迪米特列夫
<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";

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

复制到Chrome扩展程序中的剪贴板

AG Grid 表格数据复制到剪贴板在反应中不起作用

在Chrome和Firefox中秘密复制到剪贴板的JavaScript功能?

单击Chrome扩展程序的浏览器操作时,将文本复制到剪贴板

不使用Flash将选定的文本复制到剪贴板中-必须是跨浏览器

在引导程序模式中调用时,“复制到剪贴板”功能不起作用

JavaScript复制到剪贴板不起作用

复制到剪贴板不起作用 javascript

使用vuejs2复制到剪贴板

在Intellij IDEA中,是否可以将当前编辑器选项卡的路径复制到剪贴板?

如何在Firefox WebExtension加载项中通过chrome.notification.on和chrome.notification.onClick复制到剪贴板?

如何在Vim中复制到剪贴板?

复制到Node.js中的剪贴板?

复制到javascript中的剪贴板功能?

从Angular中的textarea复制到剪贴板

将链接复制到 jquery 中的剪贴板

使用 UiPath 复制到 SAP 中的剪贴板

是一个 javascript 代码,用于从 textarea 中的文本中删除空行并复制到剪贴板服务器端程序

如何在Eclipse中将PyDev包资源管理器中的属性或方法名称复制到剪贴板?

闪亮的sliderInput在Chrome浏览器中不起作用

将突出显示的文本复制到剪贴板,然后使用剪贴板将其追加到列表中

如何将文本复制到剪贴板-跨浏览器

使用ReactJS将活动浏览器的URL复制到剪贴板

当浏览器不集中时从网站复制到剪贴板

HTML 复制到剪贴板按钮不起作用

ng-clip复制到剪贴板不起作用

从表td复制到剪贴板不起作用

C#复制到剪贴板在运行时不起作用

将unicode字符串复制到剪贴板不起作用