vue根据URL链接生成二维码

1.下载

npm install qrcode --save-dev

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

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

3.生成二维码

   <img :src="QRImgUrl" />

<script>

import QRCode from "qrcode";

export default {

  name: "phone",

  data() {

    return {

      QRImgUrl: "",

      QRlink: "https://152.136.245.230:7784/play/index.html?uid=1&zid=1&roomid=53",

    };

  },

  mounted() {},

  created() {

    this.getQRcode();

  },

  methods: {

    getQRcode() {

      let opts = {

        errorCorrectionLevel: "L", //容错级别

        type: "image/png", //生成的二维码类型

        quality: 0.3, //二维码质量

        margin: 4, //二维码留白边距

        width: 256, //宽

        height: 256, //高

        text: "", //二维码内容

        color: {

          dark: "#666666", //前景色

          light: "#fff", //背景色

        },

      };

      QRCode.toDataURL(this.QRlink, opts, (err, url) => {

        if (err) throw err;

        //将生成的二维码路径复制给data的QRImgUrl

        this.QRImgUrl = url;

      });

    },

  },

};

</script>