VUE 프로젝트 이차원 코드를 생성 qrcodejs2 사용

최근에 쓰기 프로젝트 요구, 다음, qrcodejs2 사용 이상을 찾을 수있는 인터넷 주소의 배경에 따라 두 차원 코드를 생성, 다음 테스트는 나중에 사용하기 위해, 다음 사용을 구성 할 필요를 달성 할 수 발생

 

1. 설치 패키지

cnpm I qrcodejs2 -S

2. 프로젝트

HTML :

! - QR 코드 폭탄 상자 -> 
<! - 나는 2 차원 코드 상자를 재생하고, 사용 단어가 두 차원 코드의 요소로드 할 수 있습니다를 제공하기 -> 
<EL-하여 유형의 버튼 = " 차 "payOrder"@ = 클릭 " > </ EL-버튼> 이차원 코드를 생성 
<EL- 대화 
폭 "30 % = " 
제목 : ="결제 " 
@close ="closeCode " 
: visible.sync ="innerVisible " 
추가] 본체 ->를 
<div 클래스 = "paycode"> 
<! - 용기가 이차원 코드, REF 할 필요 배치 -> 
    <div ID = "하시면 자동"REF = "하시면 자동"> </ div> 
</ div> 
</ EL-대화>

JS :

// 도입 
'qrcodejs2'에서 가져 오기 QRCode의 

방법 : { 
  // 이차원 코드 표시 
  payOrder () {
     다음은이 .innerVisible을 = true로 
    // 보통 배경 점프 링크에 의해 반환 된 2 차원 코드 내용, 여기에 죽은 사람의 기록입니다 연결 
    이 본 .qrcode를 = 'https://yuchengkai.cn/docs/frontend/#typeof'
     // nextTick 데이터가 렌더링되도록 $를 사용 
    이 본를 . $ nextTick (() => {
       이 본 .crateQrcode () 
    }) 
  } 
  // 이차원 코드 발생 
  crateQrcode () {
     이 본 .qr = 새로운 새 QR 코드 ( '하시면 자동' { 
      : 폭 150 , 
      : 신장 , 150 //높이 
      텍스트 : 다음은이 .qrcode // 2 차원 코드 내용 
      // 렌더링 : '캔버스'// (기본 캔버스에 의해 두 가지 방법으로 테이블과 캔버스) 렌더링 모드를 설정 
      // 배경 : '#의 f0f' 
      // 전경 ' FF0 번호는 ' 
    })
     // 을 console.log (this.qrcode) 
  },
   // 분명 이차원 코드가 생성 된 팝업 창 닫기 상자 
  closeCode을 () {
     다음은이 . refs.qrcode.innerHTML $ =' ' 
  } 
}

의 효과를보기 :