1. 下載qrcode包? ?npm install?qrcode --save??
2. 封裝組件
<template>
????????<div>
? ? ? ? ????????<canvas :id="date.canvasId">
????????</div>
</template>
<script>
import QRCodefrom 'qrcode';
export default {
????????????name:'qrcode',
????????????data(){
????????????????return {
????????????????????date:{
? ? ? ? ? ????????? ????????url:"error",
? ? ? ? ? ????????? ????????canvasId:"canvasId",
? ? ? ? ? ? ? ????????},
? ? ????????????}
????????????},
????????????components: {
????????????????????QRCode: QRCode
????????????},
? ??????????methods: {
????????????????????useqrcode(date){
????????????????????????????this.date = date;
? ? ? ? ????????????????????this.$nextTick(function () {
????????????????????????????????????var canvas =document.getElementById(this.date.canvasId)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? QRCode.toCanvas(canvas, this.date.url,{
????????????????????????????????????????width:150,
? ? ? ? ? ? ? ? ????????????????????????height:150,
? ? ? ? ? ? ????????????????????????},function (error) {
????????????????????????????????????????????if (error)console.error(error)
????????????????????????????????????????????console.log('QRCode success!');
? ? ? ? ? ? ????????????????????????})
????????????????????????})
????????????????}
? ? ?},
}
</script>
3. 在父組件調(diào)用useqrcode并傳入url埠偿，id數(shù)據(jù)即可
