vue项目生成二维码

淋雪小新

已于 2022-09-16 17:20:57 修改

阅读量195

点赞数

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

于 2022-09-16 17:15:52 首次发布

本文链接：https://blog.csdn.net/zxl_start/article/details/126894362

版权

前端同时被 3 个专栏收录

59 篇文章 2 订阅

订阅专栏

vue

57 篇文章 0 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

vue项目生成二维码

npm install vue-qr --save
import vueQr from 'vue-qr'

<vue-qr :logoSrc="imageUrl" text="123456" :size="200"></vue-qr>
 
<script>
    export default {
        name: "qecode",
        data() {
            return {
                imageUrl:'',//icon路径
            }
        },
        components: {
            vueQr
        },
    },
}
</script>

在这里插入图片描述
完整代码

<template>
  <div>
    <div class="qrcode" ref="qrCodeUrl"></div>
    <vue-qr :logoSrc="imageUrl" text=""https://blog.csdn.net/zxl_start/article/details" :size="200"></vue-qr>
  </div>
</template>

<script>
import vueQr from "vue-qr";
export default {
  data() {
    return {
      imageUrl: require("./my.jpg"),
    };
  },
  components: {
    vueQr,
  },
  methods: {
    creatQrCode() {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: "https://blog.csdn.net/zxl_start/article/details", // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
  },
  mounted() {
    this.creatQrCode();
  },
};
</script>


<style scoped>
.qrcode {
  display: inline-block;
  width: 132px;
  height: 132px;
  background-color: #fff;
  padding: 6px;
  box-sizing: border-box;
}
</style>