Le projet Vue intègre vue-qrcode pour générer du code QR

Le projet Vue intègre vue-qrcode pour générer du code QR

Par rapport à l'utilisation précédente du back-end pour générer un code QR et le transmettre au front-end, il est également plus flexible de générer directement un code QR au niveau du front-end. C'est peut-être aussi parce que je connais mieux le frontal, donc je le trouve plus facile à utiliser.
Présentation officielle de vue-qrcode : https://www.npmjs.com/package/vue-qr
Le lien de référence de cet article https://blog.csdn.net/fifteen718/article/details/85850511

1. Installez vue-qrcode sur le front-end

npm install vue-qr --save

2. Référence dans le dossier de projet

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

Liez la valeur de la ligne via slot-scoperow , puis affectez les données qui doivent être encapsulées dans le code QR au contenu lié au code QR via un champ de type String , c'est-à-dire . De cette manière, il est possible d'obtenir des affectations correspondantes dans les codes QR qui sont ouverts lorsque différents boutons de rangée de données sont cliqués, et de réaliser une commutation dynamique des données. ( La méthode pour obtenir les données est omise )orderEncodeencode

3. Introduction aux attributs communs

Nom d'attribut	Présentation de la propriété
texte	Le contenu des données du paquet de code bidimensionnel
taille	Largeur et hauteur du code QR, il suffit de définir un paramètre
marge	La marge par défaut est de 20 pixels, qui peut être définie sur 0
couleurDark	La couleur du point solide, faites attention à le régler avec colorLight pour être efficace
couleurLumière	Couleur vierge, faites attention à la définir avec colorDark pour être efficace
logoSrc	L'image au milieu du code QR
logoÉchelle	La taille de l'image du milieu