vue H5当前页面生成二维码

1.使用 npm install --save qrcode 下载依赖包

2.在你需要生成二维码的页面中导入 import QRCode from "qrcode"

3.存放二维码的标签

4.JS代码

<script>
import QRCode from "qrcode";
export default {
  // 组件名称
  name: "demo",
  data() {
    return {
      obj: {
        userName: "车萍萍",
        station: "二手商用车鉴定评估师",
        stationLevel: "中级",
        certificateNo: "20150101235959999001",
        firstPicture: "",
        secondPicture: "",
        ateIssueTime: "2015-01-01",
      },
      url: "http://192.168.3.91:8080/defaultEva",
    };
  },
  mounted() {
    QRCode.toDataURL(this.url, {
      //这个this.url就是你扫码后要跳转的地址
      version: 7, //版本号
      errorCorrectionLevel: "Q", //容错率,(建议选较低)更高的级别可以识别更模糊的二维码,但会降低二维码的容量
      width: 280, //设置二维码图片大小
      height: 280,
    })
      .then((url) => {
        console.log(url); //这个url是二维码生成地址,也就是相当于图片地址
        this.obj.secondPicture = url; //赋值给变量。用在img的src属性上
      })
      .catch((err) => {
        console.error(err);
      });
  },
};
</script> 

5.生成效果

vue H5当前页面生成二维码_第1张图片

你可能感兴趣的:(H5,vue.js,前端,javascript)