1、使用方法

1.1、载入 JavaScript 文件

<script src="qrcode.js"></script>

1.2、调用

// 简单方式
new QRCode(document.getElementById('qrcode'), 'your content');// 设置参数方式
var qrcode = new QRCode('qrcode', {text: 'your content',width: 256,height: 256,colorDark : '#000000',colorLight : '#ffffff',correctLevel : QRCode.CorrectLevel.H
});// 使用 API
qrcode.clear();
qrcode.makeCode('new content');

1.3、参数说明

1.3.1、new QRCode(element, option)

名称	默认值	说明
element	-	显示二维码的元素或该元素的 ID
option		参数配置

option 参数说明
名称	默认值	说明
width	256	图像宽度
height	256	图像高度
typeNumber	4
colorDark	"#000000"	前景色
colorLight	"#ffffff"	背景色
correctLevel	QRCode.CorrectLevel.L	容错级别，可设置为： QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H

API接口
名称	说明
makeCode(text)	设置二维码内容
clear()	清除二维码。（仅在不支持 Canvas 的浏览器下有效）

2、安装qrcodejs2

npm install qrcodejs2 –save
// 或
yarn add qrcodejs2

3、初步封装组件

<!--* @Descripttion: * @version: * @Author: AowCt <awoct10@163.com>* @Date: 2021-05-12 14:03:44* @LastEditors: AowCt <awoct10@163.com>* @LastEditTime: 2021-07-13 11:20:45
-->
<template><div class="wechat staff-doctor ui-top-main-bj"><div class="QRcode"><svg-icon icon-class="icon-QRcode" @click="clickQRcode"/><div>查看二维码</div></div><div class="qrcode" ref="qrcode"></div><van-popup v-model="showQRcode" class="qrcode_box"closeable close-on-click-overlay><img class="qrcode_img" :src="qrcodeHref" alt="" srcset=""><div>医生专属二维码</div></van-popup></div>
</template><script>
import { Skeleton, List, PullRefresh, Popup} from 'vant';
import { getThousandNum } from '@/utils/utils.js';
import QRCode from 'qrcodejs2'
export default {components: {[Skeleton.name]: Skeleton,[List.name]: List,[PullRefresh.name]: PullRefresh,//下拉刷新[Popup.name]: Popup},data() {return {medicalId: null,loading: false,listData:[],showQRcode: false,qrcode: null,qrcodeHref: null}},created() {this.medicalId = this.$route.query.id ? this.$aseDecode(this.$route.query.id,this.$constJs.doctorId) : null},methods: {clickQRcode() {this.showQRcode = !this.showQRcodethis.$nextTick(function(){//这里写方法if (this.showQRcode) {this.createQrCode(this.$refs.qrcode, this.doctorData.type);}});},createQrCode(qrstr, type){//创建二维码let _url = `${window.location.origin}?id=${this.medicalId}`if(type == 'heart'){_url += `&classify=heart`}if (this.qrcode == null) {this.qrcode = new QRCode(qrstr,{width: 400,height: 400,text: _url// background: '#f0f',// foreground: '#ff0'})let timer = setTimeout(() => {// const img = qrstr.querySelector("img");const canvas = document.getElementsByTagName("canvas")[0];var ctx = canvas.getContext("2d");var img = new Image;// 获取图片地址img.src = require('@/images/mailiu_logo.jpg')// 开启跨域支持img.crossOrigin = "*";// 开始绘制的横坐标var x = 140;// 开始绘制的纵坐标var y = 140;// 绘制的宽度var width = 120;// 绘制的高度var height = 120;// 图片加载完成后执行img.onload = () => {ctx.beginPath();//  ctx.arcTo(x + w, y, x + w, y + h, r);ctx.arc(200, 200, 80, 0, Math.PI * 2);// ctx.fillStyle('#ffffff')// ctx.fill()//保证图片无bug填充ctx.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内// 绘制图片ctx.drawImage(img, x, y, width, height);ctx.restore();ctx.closePath();this.qrcodeHref = canvas.toDataURL("image/png");clearTimeout(timer)}}, 100);}}},
}
</script><style lang="less">
.wechat{&.staff-doctor{.van-popup__close-icon--top-right{top: 0.2rem;right: 0.2rem;font-size: 0.38rem;color: #474747;}.qrcode{display: none;.qrcode_icon{width: 84px;height: 84px;border-radius: 12px;border: 1px solid blue;}}.qrcode_box{width: 4.8rem;height: 5.86rem;color: #878787;font-size: 0.3rem;text-align: center;line-height: 0.7rem;border-radius: 0.12rem;.qrcode_img{width: 3.8rem;height: 3.8rem ;margin: 0 auto;margin-top: 0.9rem;margin-bottom: -0.03rem;}}}
}
</style>
<style lang="less" scoped>
.wechat{&.staff-doctor{&.wechat.ui-top-main-bj{background-size: 100% 3.76rem;.QRcode{font-size: 0.26rem;.svg-icon{font-size: 0.68rem;}}}}}
}
</style>

4、二维码效果

Vue生成二维码组件封装相关推荐

qrcodejs2--Vue生成二维码组件封装
1.安装qrcodejs2: npm install qrcodejs2 --save yarn add qrcodejs2 2.初步封装组件: /*** @file 生成二维码的组件* @autho ...
【工具】Vue中生成二维码组件——vue-qr
[工具]Vue中生成二维码组件--vue-qr npm地址--https://www.npmjs.com/package/vue-qr 注:不支持IE浏览器效果 1.安包 npm install v ...
vue生成二维码并下载二维码
首先安装一下面这个插件 cnpm install vue-qr -S 接下来在需要生产并下载二维码的页面引入 import VueQr from 'vue-qr' 并在components中注册为组件 ...
利用VUE生成二维码（两种方式）
利用Vue生成二维码 Author:kak vue有两种生成二维码的方式,qrcode.vue-qr(有icon): 1.qrcode npm ``install` `--save qrcodejs2 ...
Vue生成二维码，自定义插入图片生成logo
Vue生成二维码,自定义插入图片生成logo vue-qr是一个很棒的制作二维码开源库,github地址:https://github.com/Binaryify/vue-qr 1.安装vue-qr ...
vue使用qrcodejs2生成带log的二维码图片，vue生成二维码图片中间带log，自定义log
安装插件 npm install qrcodejs2 --save 在页面中引入 import QRcode from 'qrcodejs2' 普通的二维码此处的id就是页面中要展示二维码容器的id ...
vue生成二维码并下载
vue生成二维码图片,这里使用的是qrcode.js 这个插件 1.下载插件 npm install --save qrcodejs2 2.组件内使用 <template> <B ...
QT 生成二维码接口封装
##前言在项目开发中经常会用到二维码动态生成,可用加载库的方式来实现,不过由于跨平台的关系,在部分平台上加载的库要单独编译,并且加载库的方式也不尽相同.本文采用源码的形式,封装一个外部调用的接口工其 ...
【Vue】Vue生成二维码 Vue把url地址生成二维码手机打开扫一扫手机端打开实战案例 vue生成二维码
代码 npm install qrcodejs2 --save 代码引入到项目中,不需要再main.js做处理,只需要在使用的vue页面中引入. 在页面中使用 <template>< ...

Vue生成二维码组件封装

1、使用方法

1.1、载入 JavaScript 文件

1.2、调用

1.3、参数说明

1.3.1、new QRCode(element, option)

2、安装qrcodejs2

3、初步封装组件

4、二维码效果

Vue生成二维码组件封装相关推荐

最新文章

热门文章