Vue project integrates vue-qrcode to generate QR code

Vue project integrates vue-qrcode to generate QR code

Compared with the previous use of the back-end to generate a QR code and pass it to the front-end, it is also more flexible to directly generate a QR code at the front-end. This may also be because I am more familiar with the front end, so I find it easier to use.
Official introduction of vue-qrcode : https://www.npmjs.com/package/vue-qr
The reference link of this article https://blog.csdn.net/fifteen718/article/details/85850511

1. Install vue-qrcode on the front end

npm install vue-qr --save

2. Reference in the project file

<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="orderId" label="订单编号" />
      <el-table-column width="270px" label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="showEncode(row)"
            >显示二维码</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible="open" :title="title" width="360px">
      <div>
        <template>
          <vue-qr
            class="vue-qr"
            :text="encode"
            :logoScale="50"
            :size="300"
          ></vue-qr>
        </template>
      </div>
      <div>
        <el-button type="primary" style="margin-left: 200px" @click="cancel"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
    
     mapGetters, mapState } from "vuex";
import vueQr from "vue-qr";

export default {
    
    
  components: {
    
     vueQr },
  data() {
    
    
    return {
    
    
      listLoading: true,
      tableData: [],
      open: false,
      title: "",
      encode: ""
  	},
  }
  methods: {
    
    
    showEncode(row) {
    
    
      this.open = true;
      this.title = "订单二维码";
      this.encode = row.orderEncode;
    },
    cancel() {
    
    
      this.open = false;
    },
  },
};
</script>

Bind the value of the line through slot-scoperow , and then assign the data that needs to be encapsulated in the QR code to the content bound to the QR code through a String type field , ie . In this way, it is possible to achieve corresponding assignments in the QR codes that are opened when different data row buttons are clicked, and realize dynamic switching of data. ( The method to get the data is omitted )orderEncodeencode

3. Introduction to common attributes

attribute name	Property introduction
text	The data content of the two-dimensional code package
size	QR code width and height size, just set a parameter
margin	The default margin is 20px, which can be set to 0
colorDark	The color of the solid point, pay attention to setting it together with colorLight to be effective
colorLight	Blank color, pay attention to set it together with colorDark to be effective
logoSrc	The picture in the middle of the QR code
logoScale	The size of the middle picture