【Vue】二维码生成

2022-06-06 12:04:27 阅读：149 来源： 互联网

标签：Vue return 对话框房间生成 blog 二维码 https net

按组长提供的样例，功能比较相符合的是这个博客：

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

效果：

标签：Vue,return,对话框,房间,生成,blog,二维码,https,net
来源： https://www.cnblogs.com/mindzone/p/16347690.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【Vue】二维码生成

二维码对话框页面：