vue快速生成二维码【伸手党福利】

最新推荐文章于 2024-08-07 22:08:53 发布

三个人工作室

最新推荐文章于 2024-08-07 22:08:53 发布

阅读量322

点赞数

分类专栏： javaweb vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wwppp987/article/details/128351181

版权

Vue qrcodejs2 二维码 canvas渲染前端开发

关键词由CSDN通过智能技术生成

javaweb 同时被 2 个专栏收录

60 篇文章 5 订阅

订阅专栏

vue

59 篇文章 0 订阅

订阅专栏

cmd 中

yarn add qrcodejs2

vue:demo

<template>
  <div>
    <div id="qrcode"></div>
  </div>

</template>

<script>
import QRCode from 'qrcodejs2';

export default {
  name: "print",
  data() {
    return {
        qrcodeAddress:'xxxxxxxxxxxxxxxxxxx'
    }
  },
  created() {
   
  },
  //方法集合
  methods: {
    qrcode() {
      let qrcode = new QRCode("qrcode", {
        render: "canvas", //也可以替换为table
        width: 122,
        height: 122,
        text: this.qrcodeAddress, // 二维码地址
        colorDark: "#000",
        colorLight: "#fff",
        correctLevel : QRCode.CorrectLevel.H
      });
    },
  },
  mounted() {
    this.qrcode();
  }


}
</script>

<style scoped>

</style>