按組長提供的樣例，功能比較相符合的是這個部落格：

https://www.jianshu.com/p/8d59107e1992

這個部落格引用的是這篇文章：

https://blog.csdn.net/wwqqqq123/article/details/90261994

如何使用和引數說明很清楚，這裡我就直接貼我寫的DEMO

東西還沒要求要弄上去，但是我自己先弄出來，怕後面需求變動又說需要了

首先主介面會放一個對話方塊：

    <el-dialog
      v-if="qrCodeVisible"
      title="二維碼生成"
      :append-to-body="true"
      :visible.sync="qrCodeVisible"
      width="450px"
      class="roll-dialog"
    >
      <qr-code-page :rooms="changedList" />
    </el-dialog>

會傳遞選中的房間列表資料

二維碼對話方塊頁面：

logo隨便引用一個小圖示

大小200畫素

text屬性就是儲存的引數，因為不確定傳什麼，先放上場所編號和房間號

因為是房間列表，所以傳遞若干個房間，用div包裹元件再遍歷

<template>
  <div>

    <div
      class="qrCode-border"
      v-for="(room, idx) in rooms"
      :key="idx"
      align="center"
    >
      <h3>房號：{{room.roomNo}}</h3>
      <vue-qr
        :logo-src="logoSrc"
        :size="200"
        :auto-color="true"
        :dot-scale="1"
        :text="room.placeCode + '-' + room.roomNo"
      />
    </div>

  </div>
</template>

<script>

import VueQr from 'vue-qr'
export default {
  name: 'QrCodePage',
  components: {
    VueQr
  },
  props: {
    rooms: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      logoSrc: '/favicon.ico'
    }
  }
}
</script>

<style scoped>
  .qrCode-border {
    margin: 20px 0px;
  }
</style>

解決對話方塊過長的問題，設定對話方塊的滾動條

https://blog.csdn.net/qq_32837111/article/details/121248211

效果：