vue 复制功能

 

实现：

 let message =
        `       ${name}
        电话：${item.phone}
        部门：${item.department}
        职务: ${item.post}
        邮箱：${item.email}`;
        navigator.clipboard.writeText(message).then(() => {
            this.$message.success('复制成功')
        })

　上面实现的在本地值行没问题，但是在测试环境发布之后会报错：

Cannot read properties of undefined (reading 'writeText')

所以需要兼容下：这个兼容可能还有问题 所以有用插件的 npm install clipboard --save ，等我使用了再来写  

copyId=row=>{
                                    let message =`12222222`;
                                    // navigator.clipboard.writeText(message).then(() => {
                                    //     this.$message({
                                    //         type: "success",
                                    //         message: "复制成功！",
                                    //     });
                                    // })
                                    if (navigator.clipboard && window.isSecureContext) {
                                        // navigator clipboard 向剪贴板写文本
                                        this.$message.success('复制成功!')
                                        return navigator.clipboard.writeText(message)
                                    } else {
                                        // 创建text area
                                        const textArea = document.createElement('textarea')
                                        textArea.value = message
                                        // 使text area不在viewport，同时设置不可见
                                        document.body.appendChild(textArea)
                                        textArea.focus()
                                        textArea.select()
                                        this.$message.success('复制成功')
                                        return new Promise((res, rej) => {
                                        // 执行复制命令并移除文本框
                                        document.execCommand('copy') ? res() : rej()
                                        textArea.remove()
                                        })
                                    }
                                },