随笔 弹窗 二维码生成及图片下载

一、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: