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()

                                        })

                                    }

                                },

巴特西

vue 复制功能

最新文章

热门文章