vue 生成二维码

lijiuju

已于 2022-07-09 16:00:09 修改

阅读量500

点赞数 1

分类专栏：前端文章标签： vue

于 2022-07-09 15:24:52 首次发布

本文链接：https://blog.csdn.net/lijiuju/article/details/125693995

版权

前端专栏收录该内容

17 篇文章 1 订阅

订阅专栏

qrcodejs2官网

// 安装
npm install --save qrcode

// 在需要的页面引用
import QRCode from "qrcodejs2";

// 使用
<template>
    <view ref="qrCodeUrl"></view>
</template>


<script>
import QRCode from "qrcodejs2";
export default {
  data() {
    return {};
  },

  mounted() {
    this.creatQrCode();
  },

  methods: {
    creatQrCode() {
      // 这样使用this.$refs.qrCodeUrl 是拿不到dom元素的
      // 一定要 this.$refs.qrCodeUrl.$el
      var qrcode = new QRCode(this.$refs.qrCodeUrl.$el, {
        text: "https://www.baidu.com", // 需要转换为二维码的内容
        width: 132,
        height: 132,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
    this.$refs.qrcodeDiv.$el.innerHTML = '' // clear the code. 清除二维码
  },
};
</script>