vue中使用qrcodejs2生成二維碼

1. 安裝包

npm i qrcodejs2 -S

2. 項目中使用

HTML:

!-- 二維碼彈框 -->
<!-- 我的二維碼是在彈框里,使用的話只需要給一個裝二維碼的元素就可以 -->
<el-button type="primary" @click="payOrder">生成二維碼</el-button>
<el-dialog
width="30%"
:title="payment"
@close="closeCode"
:visible.sync="innerVisible"
append-to-body>
<div class="paycode">
<!-- 放置二維碼的容器,需要給一個ref -->
    <div id="qrcode" ref="qrcode"></div>
</div>
</el-dialog>

js:

// 引入
import QRCode from 'qrcodejs2'

methods: {
  // 展示二維碼
  payOrder () {
    this.innerVisible = true
    // 二維碼內容,一般是由后台返回的跳轉鏈接,這里是寫死的一個鏈接
    this.qrcode = 'https://yuchengkai.cn/docs/frontend/#typeof'
    // 使用$nextTick確保數據渲染
    this.$nextTick(() => {
      this.crateQrcode()
    })
  },
  // 生成二維碼
  crateQrcode () {
    this.qr = new QRCode('qrcode', {
      width: 150,
      height: 150, // 高度
      text: this.qrcode // 二維碼內容
      // render: 'canvas' // 設置渲染方式（有兩種方式 table和canvas，默認是canvas）
      // background: '#f0f'
      // foreground: '#ff0'
    })
    // console.log(this.qrcode)
  },
  // 關閉彈框,清除已經生成的二維碼
  closeCode () {
    this.$refs.qrcode.innerHTML = ''
  }
}

 

也是剛好需要做到這個功能，於是就網上找了一下；原文鏈接：https://www.cnblogs.com/steamed-twisted-roll/p/11271829.html