vue 点击复制链接功能

最新推荐文章于 2025-10-23 18:38:30 发布

原创最新推荐文章于 2025-10-23 18:38:30 发布 · 置顶 · 1w 阅读

6 ·

CC 4.0 BY-SA版权

技术分享专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在Vue项目中实现点击按钮复制链接的功能。通过在模板中设置按钮和使用methods方法，结合clipboard API，实现了点击按钮后自动将链接复制到剪贴板。此功能提升了用户体验，使得分享链接更加便捷。

代码
template里

<p class="inviteCode" id = "inviteCode" v-text="short_url"></p>
<el-button v-if="short_url" class="copy" @click="CopyUrl">复制链接</el-button>

在methods里


```javascript
// 复制
    CopyUrl(data){
        var Url2 = document.getElementById("inviteCode").innerText;
        var oInput = document.createElement("input");
        oInput.value = Url2;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = "oInput";
        oInput.style.display = "none";
        this.$message({
          message:"复制成功!",
          type:'success'
        })
    },

复制干嘛?
楞着呀!