vue3.0 生成链接（点击按钮直接复制链接）

最新推荐文章于 2024-05-16 11:23:08 发布

新宇最优秀

最新推荐文章于 2024-05-16 11:23:08 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.csdn.net/tendernessxy/article/details/119151622

本文介绍了如何在Vue3.0中创建一个功能，通过点击按钮实现链接的快速复制。详细讲解了实现这个功能的方法和步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义一个按钮

 <a-button style="margin-left: 16px" type="primary" @click="handleGenerateLink">
   <img src="../../assets/imgs/linkIcon.png" alt="" style="margin: -3px 8px 0 0">
   生成链接
   <div
    id="generatelink" 
    :name="urls" 
    value="生成链接"
    style="display: none"
   >
   生成链接
   </div>
 </a-button>

方法

const { origin } = window.location
const { pathname } = window.location       
   // 生成链接
   const handleGenerateLink = () => {
   // 获取 token
   urls.value = `${origin + pathname}#/dataReport/${taskId}?token=1111`
   showModalGenerateLink.value = true
   const clipBoardContent=document.getElementById('generatelink').attributes.name.value
   const oInput = document.createElement('input')
   oInput.value = clipBoardContent
   document.body.appendChild(oInput)
   oInput.select()
   document.execCommand('Copy')
   oInput.style.display = 'none'