Vue实现链接分享

点击按钮复制链接 

先获取当前页面的协议、端口、域名

然后拼接路径 

得到完整路径 创建input 将路径交给input

调用input节点原生复制命令

   // 生成当前页面链接并复制 需要后台配合  PC端使用
   //传入参数
        const handleGenerateLink = (articleID) => {
          //window.location对象包含当前URL的信息，例如协议（如“http”或“https”）、主机名、端口和 
          //路径名。
          //因为使用hash模式 所以获取的是#号前URL
            let { origin } = window.location
            let { pathname } = window.location
            // console.log(val, '复制链接')
            // let url = window.location.href //当前或他人 页面链接地址  目前是当前
            let url = `${origin + pathname}#/article_details/${articleID}`
           //已经获取完整路径
           //复制路径
            let inputNode = document.createElement('input')  // 创建input
            inputNode.value = url // 赋值给 input 值
            document.body.appendChild(inputNode) // 插入进去
            inputNode.select() // 选择对象
            document.execCommand('Copy') // 原生调用执行浏览器复制命令
            inputNode.className = 'oInput'
            inputNode.style.display = 'none' // 隐藏
            alert('链接已复制')
        }