生成的二維碼中間可以放頭像

1、安裝

以管理員身份執行

npm install vue-qr --save

2、匯入

import VueQr from 'vue-qr'

3、註冊：

components: { VueQr },

4、使用

點選按鈕

<el-button type="primary" size="mini" @click="handlePrint()">列印二維碼</el-button>

handlePrint方法如下：

handlePrint() {
      this.$prompt('二維碼數量', '提示', {
        confirmButtonText: 
 
'確定',
        cancelButtonText: '取消',
        inputPattern: /^-?[1-9]\d*$/,
        inputErrorMessage: '必須為數字'
      }).then(({ value }) => {
        if (value > 200 && value != null) {
          this.$message.info('一次最多列印200個')
          return
        }
        this.qrcodeCount = []
        
 
this.qrcodeCompleted = true
        this.innerVisible = true
        for (let i = 1; i <= parseInt(value); i++) {
          this.qrcodeCount.push({
            value: "https://www.baidu.com/"
          })
        }
      }).catch((error) => {
        console.log(error)
      })
    }

展示二維碼

<el-dialog title="
 
列印二維碼" width="75%" :visible.sync="innerVisible">
      <div id="print" ref="print" v-loading="!qrcodeCompleted">
        <div v-for="(item, index) in qrcodeCount" style="display: inline-block;text-align: center;margin:10px 10px;">
          <vue-qr :logoSrc="logoSrc" :text="item.value" :size="120" :margin="0"></vue-qr>
        </div>
      </div>
      <el-button type="primary" v-print="'#print'">開始列印</el-button>
    </el-dialog>

效果：

點選按鈕，彈出提示框

點選確定，彈出對話方塊

點選“列印二維碼”按鈕

所有程式碼:

<template>
  <div>
    <el-button type="primary" size="mini" @click="handlePrint()">列印二維碼</el-button>
    <el-dialog title="列印二維碼" width="75%" :visible.sync="innerVisible">
      <div id="print" ref="print" v-loading="!qrcodeCompleted">
        <div v-for="(item, index) in qrcodeCount" style="display: inline-block;text-align: center;margin:10px 10px;">
          <vue-qr :logoSrc="logoSrc" :text="item.value" :size="120" :margin="0"></vue-qr>
        </div>
      </div>
      <el-button type="primary" v-print="'#print'">列印二維碼</el-button>
    </el-dialog>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
export default {
  name: 'Index',
  components: { VueQr },
  created() {
  },
  mounted() {
  },
  data(){
    return{
      qrcodeCount: [],
      qrcodeCompleted: false,
      innerVisible: false,
      logoSrc: require('../assets/guaileen.png'),
    }
  },
  methods: {
    handlePrint() {
      this.$prompt('二維碼數量', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        inputPattern: /^-?[1-9]\d*$/,
        inputErrorMessage: '必須為數字'
      }).then(({ value }) => {
        if (value > 200 && value != null) {
          this.$message.info('一次最多列印200個')
          return
        }
        this.qrcodeCount = []
        this.qrcodeCompleted = true
        this.innerVisible = true
        for (let i = 1; i <= parseInt(value); i++) {
          this.qrcodeCount.push({
            value: "https://www.baidu.com/"
          })
        }
      }).catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>