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

Question

在我的laravel/Vue应用程序中，我有一个将链接复制到剪贴板的选项。

我的组件中有以下内容:

<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时，它不会复制值…

如何将文本(文本字段中的当前值)复制到链接单击时的剪贴板而不显示该文本框…

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'将隐藏文本框的蓝色线条，当它被选中。