vue项目之前端生成二维码

最新推荐文章于 2024-09-18 13:31:33 发布

柒仔不安

最新推荐文章于 2024-09-18 13:31:33 发布

阅读量905

点赞数

分类专栏： VUE 文章标签： vue-qr vue 二维码

本文链接：https://blog.csdn.net/yan263364/article/details/108009540

版权

VUE 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

一、前提

刚开始是通过后台生成二维码并存放在云上的。
后来公司的云，在获取到url后，图片不能及时的显示，需要等待几秒；
之后，用了腾讯云解决的，在现在这个活动中，竟然出现线上空白的情况
最终，选择前端生成二维码

二、实现

安装依赖包

npm install vue-qr --save

HTML:

<vue-qr class="vue-qr" :margin="0" :text="downloadData.link" colorDark="#000" colorLight="#fff" size="139">

JS:


import vueQr from 'vue-qr'

// data
data() {
  return {
      downloadData: {
      	// link在项目里面有动态的参数，这里面写死了
        link: 'https://**.****.com/activity/golden7/#/?****Type=01',
      }
  }

// components
components: {
  vueQr: vueQr,
  swiper: Swiper,
  swiperSlide: SwiperSlide,
},