vue 动态生成下载二维码

最新推荐文章于 2024-04-25 11:38:17 发布

菲奥娜娜娜娜

最新推荐文章于 2024-04-25 11:38:17 发布

阅读量1k

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_58363422/article/details/125977652

版权

菜花记录

vue项目如何动态生成一个下载二维码
项目中二维码动态配置好下载链接，现场直接修改配置就可以调试
第一步先直接在终端下载vue插件

npm install vue-qriously --save-dev

第二步全局引入在main.js入口文件中

import vueQriously from "vue-qriously";

第三步在 public文件下的config.js文件中配置好下载地址链接（这样现场直接在这块改就可以了）

var vueConfig = {
  homeDownUrl: "下载地址链接", //登录页二维码内地址
};

第四步在vue页面中

<template>
  <div>
    <div class="wrap">
      <el-row>
        <el-col :span="24">
          <div class="box">
              <!-- size:是这个Canvas的大小要根据自己需求来决定-->
            <qriously :value="baseUrl" :size="200" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseUrl: '',
    }
  },
  mounted() {
    this.baseUrl = vueConfig.homeDownUrl
  },
  methods: {}
}
</script>