vue project uses qrcodejs2 generate two-dimensional code

Recently encountered a writing project needs, generate two-dimensional code based on the background to the address on the Internet to find the next, qrcodejs2 use or more, the next test can also be achieved needs to organize the next use, for later use

 

1. Installation Package

cnpm i qrcodejs2 -S

2. Use Project

HTML:

! - QR code bomb box -> 
<! - I was playing the two-dimensional code box, use words just to give an element of two-dimensional code can be loaded -> 
<EL-the Button of the type = " primary "@ click =" payOrder " > generate two-dimensional code </ EL-Button> 
<EL- Dialog 
width =" 30% " 
: title =" Payment " 
@close =" closeCode " 
: visible.sync =" innerVisible " 
the append body--to> 
<div class = "paycode"> 
<-! containers are placed two-dimensional code, a need to REF -> 
    <div ID = "qrcode" REF = "qrcode"> </ div> 
</ div> 
</ EL-Dialog>

js:

// introduction of 
Import QRCode from 'qrcodejs2' 

Methods: { 
  // display a two-dimensional code 
  payOrder () {
     the this .innerVisible = to true 
    // two-dimensional code content, usually returned by the background jump links, here is the writing of a dead link 
    the this .qrcode = 'https://yuchengkai.cn/docs/frontend/#typeof'
     // use $ nextTick ensure that the data rendering 
    the this . $ nextTick (() => {
       the this .crateQrcode () 
    }) 
  }, 
  // generating a two-dimensional code 
  crateQrcode () {
     the this .qr = new new qRCode ( 'qrcode' , { 
      width: 150 , 
      height: 150, //Height 
      text: the this .qrcode // two-dimensional code content 
      // the render: 'Canvas' // set the rendering mode (two ways table and canvas, by default Canvas) 
      // background:' # f0f ' 
      // foreground:' FF0 # ' 
    })
     // the console.log (this.qrcode) 
  },
   // Close popup box, clear two-dimensional code has been generated 
  closeCode () {
     the this . refs.qrcode.innerHTML $ =' ' 
  } 
}

Display of results: