我有以下组件,我想有一个按钮,复制link_url
到剪贴板上点击。
我有javascript代码,当选择一个id时可以工作,但是链接没有id。我可以通过组件本身的引用完成a-tag
的选择吗?或者什么是完成这一选择的最佳方法。
我也在考虑在copyURL()
中动态地生成一个带有www.example.com _url的a标签this.link,但我想那会很脏..我正在寻找vuejs的方式。
<template>
<li class="list-group-item">
<a :href="link_url"
class="text-dark"
target="_blank"
rel="noopener noreferrer">{{ link_name }}</a>
<button @click="copyUrl">copy url from a tag</button>
</li>
</template>
<script>
export default {
props: ["link_url", "link_name"],
methods: {
copyURL() {
var Url = document.getElementById('myid'); /*GET vuejs el reference here (via $ref) but how?*/
Url.innerHTML = window.location.href;
console.log(Url.innerHTML)
Url.select();
document.execCommand("copy");
}
}
}
</script>
<style>
</style>
7条答案
按热度按时间oogrdqng1#
你可以在javascript中使用带有剪贴板的导航器对象。
注意:导航器.剪贴板.writeText是异步的。
eoxn13cs2#
如果需要使用vuejs
ref
,请将其添加为属性并在方法中按以下方式使用它:
不过,你应该看看link这个更好的交叉浏览解决方案,在这种情况下,你不需要
ref
属性。这是根据您的情况调整的链接中的解决方案:
fcipmucu3#
大多数现代网络浏览器(2021)都允许你使用这个:导航器。剪贴板。写入文本(“您的文本”);
以防万一,您也可以执行以下操作:
mnemlml84#
对我不起作用,试试这个
https://codepen.io/PJCHENder/pen/jamJpj?editors=1010,谢谢
fxnxkyjh5#
在版本3中
q8l4jmvw6#
roejwanj7#
尝试此功能: