超简单的vue实现生成二维码并下载为图片（可直接复制使用） |
您所在的位置：网站首页 › 威高大学app下载二维码图片大全 › 超简单的vue实现生成二维码并下载为图片（可直接复制使用） |
超简单的vue实现生成二维码并下载为图片（可直接复制使用）
|
背景
因为一些需求需要生成大量的二维码，用于用户核销使用，这里就用了一个比较使用的多的一个组件vue-qr. 效果
实际效果，大家可以去下面这个链接体验一下： 二维码生成工具体验网站 实现 一、添加依赖 npm install --save vue-qr如果会报错，可以和我一样，直接引入指定版本，最新版本有一定几率不兼容。 npm install --save [email protected] 二、 前端页面实现通过下面的语句引入组件 import VueQr from 'vue-qr'核心功能代码： import VueQr from 'vue-qr' export default { name: 'Index', components: { VueQr }, data () { return { content: '', // 输入框输入的内容 text: '', // 二维码实际内容 logoSrc: '', // 二维码中间的图片 randomColor: 'black', // 二维码颜色 qrCodeUrl: '', // 存放生成的二维码url isShowDialog: false, // 上传的图片预览dialog imageUrl: '' // 上传图片的临时显示链接 } }, created () { // 初始化显示 this.content = 'https://livequeen.top' this.text = this.content }, methods: { qrCodeCallback (url) { this.qrCodeUrl = url }, handleQrCode (type) { // 判断输入框的二维码内容是否为空，不为空才生成二维码 if (this.content === '') { this.$message.error('二维码内容不能为空') } else { // 将输入框内容，更新到二维码内容 this.text = this.content // 判断按钮选项 switch (type) { case 1: this.logoSrc = '' break case 2: this.$refs.chartImage.dispatchEvent(new MouseEvent('click')) break case 3: let name = new Date().getTime() let img = document.createElement('a') img.style.display = 'none' img.download = name img.href = this.qrCodeUrl document.body.appendChild(img) img.click() img.remove() break case 4: this.logoSrc = this.imageUrl this.isShowDialog = false break } } }, // 选中图片后初步守卫 showUpload () { let file = this.$refs.chartImage.files[0] // 文件格式大小判断处理 const isJPG = file.type === 'image/jpeg' | file.type === 'image/png' const isLt2M = file.size / 1024 / 1024 < 2 if (!isJPG) { this.$message.error('上传图片只能是 JPG/PNG 格式!') return } if (!isLt2M) { this.$message.error('上传图片大小不能超过 2MB!') return } // 格式无误后，预览文件处理 this.imgSaveToUrl(file) this.isShowDialog = true // 复刻文件信息 this.files = file }, // 获取选中图片的预览路径，并赋值给本地img路径，在前端展示 imgSaveToUrl (file) { // 获取上传图片的本地URL，用于上传前的本地预览，转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5 this.imageUrl = URL.createObjectURL(file) console.log('图片预览地址：', this.imageUrl) }, // 关闭卖出的dialog事件 diaClose () { this.isShowDialog = false// 关闭窗口 } } }页面样式 生成普通二维码 生成带logo二维码 下载二维码 取消 确认css样式 .body{ margin: 50px; padding: 20px; box-shadow: 0px 0px 5px 5px #c7c6c6; } .body_btn{ text-align: center; margin: 100px; } .body_qr{ text-align: center; margin-bottom: 300px; } .images{ height: 350px; fit:contain; } .dialogUpload /deep/ .el-dialog{ width: 800px; text-align: center; } .dialogUpload /deep/ .el-dialog__body{ padding: 10px; } .dialog_btn{ margin-top: 5px; text-align: right; } |
【本文地址】
今日新闻 |
推荐新闻 |