vue项目截屏功能

第一步：安装引入可用

第二步：把截取的部分用标签包起来

第三步：点击某个部分开始截图添加点击事件

第四步：编写点击事件

convert2canvas() {

            const shareContent = document.getElementsByClassName('content')[0]

            const opts = {

                useCORS: true

            }

            html2canvas(shareContent, opts).then(canvas =>{

                const imgSrc = canvas.toDataURL('image/png')

                this.canvasImg = imgSrc

            })

            setTimeout(() =>{

                this.downloadImg('全网运行态势')

            }, 2000)

        },

        downloadImg(name) {

            const a = document.createElement('a') // 生成一个a元素

            const event = new MouseEvent('click') //创建一个单击事件

            a.download = name || 'photo' // 设置图片名称

            a.href = this.canvasImg

            a.dispatchEvent(event) //触发a的点击事件

        }

Vue.js提供了一个v-on指令，可以用来添加点击事件处理器。例如，可以使用以下代码将点击事件处理器添加到文本中的某个字：<p v-on:click="yourMethod">Your Text Here</p>

---