在 VueJS 问题中单击锚标记将文本复制到剪贴板

Question

在我的 laravel/Vue 应用程序中，我可以选择将 link 复制到剪贴板。

我的组件中有以下内容。

<a @click="copyURL" ref="mylink">
        <img class="social_icon" 
          src="/images/game/copy.png"
        /></a>
        <input type="text" class="copyurl_txt" 
        value="https://mysite.site/" ref="text"></input>

在我的脚本中，

<script> 
export default {   
methods: {
            copyURL() {
              this.$refs.text.select();
              document.execCommand('copy');
            }
          },
};
</script>

这很好用，但每次我尝试显示 copyurl_txt 的 none 时，它都没有复制值...

如何在 link 单击时将文本（文本字段中的当前值）复制到剪贴板而不显示该文本框...

Answer 1

如果只是想隐藏输入框，可以使用下面的CSS,

.copyurl_txt{
  max-width: 0px;
  max-height: 0px;
  border: transparent;
}
input[type=text]:focus{
  max-width: 0px;
  max-height: 0px;
  border: transparent;
  outline: none!important;
}

'focus' 将在选中时隐藏文本框的蓝色外线。

在 VueJS 问题中单击锚标记将文本复制到剪贴板

Copy text to clipboard on anchor tag click in VueJS issue

javascript

laravel

vue.js

vue-component