Vue中qrcode的使用方法（生成二维码插件） / 前端页面根据URL链接生成二维码

这篇具有很好参考价值的文章主要介绍了Vue中qrcode的使用方法（生成二维码插件） / 前端页面根据URL链接生成二维码。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.下载

npm install qrcode --save-dev

2.引入(在所需要的页面中引入)

import QRCode from “qrcode”; //引入生成二维码插件

3.生成二维码

<canvas id="QRCode_header" style="width: 280px; height: 280px"></canvas>

<script>
import QRCode from "qrcode"; //引入生成二维码插件
export default {
  props: [""],
  data() {
    return {
      qrUrl: "",
    };
  },
  watch: {},
  mounted() {
    this.getQRCode();
  },
  created() {},
  methods: {
    getQRCode() {

    //生成的二维码为URL地址js

    this.qrUrl= "https://152.136.245.230:7784/play/index.html?uid=1&zid=1&roomid=53";

      let opts = {
        errorCorrectionLevel: "H", //容错级别
        type: "image/png", //生成的二维码类型
        quality: 0.3, //二维码质量
        margin: 0, //二维码留白边距
        width: 280, //宽
        height: 280, //高
        text: "http://www.xxx.com", //二维码内容
        color: {
          dark: "#333333", //前景色
          light: "#fff", //背景色
        },
      };
      
      let msg = document.getElementById("QRCode_header");
      // 将获取到的数据(val)画到msg(canvas)上
      QRCode.toCanvas(msg, this.qrUrl, opts, function (error) {
        if (error) {
          console.log("二维码加载失败", error);
          this.$message.error("二维码加载失败");
        }
      });
    },
  },
};
</script>

作者：微微一笑绝绝子

出处：Vue中qrcode的使用方法（生成二维码插件） / 前端页面根据URL链接生成二维码 - 微微一笑绝绝子 - 博客园

本博客文章均为作者原创，转载请注明作者和原文链接。文章来源地址https://www.toymoban.com/news/detail-558573.html

到了这里，关于Vue中qrcode的使用方法（生成二维码插件） / 前端页面根据URL链接生成二维码的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！