vue生成二維碼：vue-qr二維碼插件使用

屬性說明

 

 

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

1、安裝

以管理員身份運行

npm install vue-qr --save

2、頁面導入

vue2.x

import VueQr from 'vue-qr'

vue3.x

import vueQr from 'vue-qr/src/packages/vue-qr.vue'

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>

注意：使用v-print的前提是安裝vue打印插件vue-print-nb，參考：https://www.cnblogs.com/zwh0910/p/14984717.html

效果：

點擊按鈕，彈出提示框

點擊確定，彈出對話框

點擊“打印二維碼”按鈕

所有代碼:

<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>