一、qrcode-vue模块
该模块是用来动态生成二维码的vue模块插件,
<qrcode-vue></qrcode-vue>的底层其实是一个<canvas></canvas>标签。
要想使用qrcode.vue插件,需要用vue的脚手架安装这个插件安装指令npm install qrcode --save-dev,
在这里我举一个例子。
<el-col :span="6" class="item">
<div class="code">
<!--生成二维码-->
<qrcode-vue :value='shareUrl' :size='qrCodeSize' className='qrcode' id="picture" ref="code"></qrcode-vue>
</div>
<p class="">班级二维码</p>
<!--保存图片按钮-->
<el-button round size="small" @click="savePic">保存图片</el-button>
</el-col>
二·、如何点击保存图片进行下载
点击"保存图片"按钮在methods中写如下点击事件对应方法:
//保存图片
savePic(){
//找到canvas标签
let myCanvas = document.getElementById(‘picture’).getElementsByTagName(‘canvas’);
//创建一个a标签节点
let a = document.createElement(“a”)
//设置a标签的href属性(将canvas变成png图片)
a.href = myCanvas[0].toDataURL(‘image/png’).replace(‘image/png’, ‘image/octet-stream’)
//设置下载文件的名字
a.download = “班级二维码”
//点击
a.click()
//弹出提示
this.$message({message:‘亲,正在进行下载保存’,type:‘warning’})
},
…
还有一些随笔,
这里是下载图片功能
数组去重部分方法
ES6 let set = new Set( arr )
给对象去重 :
var arr2 = arr.filter((x, index,self)=>{
var arrids = [ ]
arr.forEach((item,i) => {
arrids.push(item.id)
})
return arrids.indexOf(x.id) === index
})
console.log(arr2);
下载二维码插件几种方式
第一种: yarn add vue-qrcode-directive
第二种: yarn add vue-qr
在main.js引入 use 一下
import qrcode from "vue-qrcode-directive"
import VueQr from 'vue-qr' //引入VueQr
Vue.use(qrcode)
Vue.use(VueQr)
第一种使用
<div v-qr="options" v-if="options" id="picture"></div>
options: {
text: `我是二维码的内容(I'm the content of the QR code.)'`,
render: "canvas",
width: 256,
height: