Vue里面qrcodejs2生成二维码

最新推荐文章于 2024-03-20 08:00:00 发布

I'm写代码

最新推荐文章于 2024-03-20 08:00:00 发布

阅读量427

点赞数

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

本文链接：https://blog.csdn.net/qq_41497443/article/details/122817917

版权

Vue 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

Vue里面qrcodejs2生成二维码

npm install qrcodejs2 --save

<template>
  <div>
    <el-row>
      <el-col :span="10">
        <h1 class="text-jumbo text-ginormous">Oh man!</h1>
        <h2>此页面还未开发哦！</h2>
        <h6>&nbsp;</h6>
        <img  src="../../assets/image/home.svg" width="90%" height="50%" title="玛卡巴卡" alt="u know what i say due">
      </el-col>
      <el-col :span="14">
        <img src="../../assets/image/home.svg" width="100%" height="100%" title="玛卡巴卡" alt="keep real man">
      </el-col>
    </el-row>
<!--    实现生成二维码-->
    <h2>你可以扫码访问：</h2>
    <div id="qrCode" ref="qrCodeDiv"></div>
  </div>
</template>
<script>
  import QRCode from 'qrcodejs2'
  export default {
    data(){
      return{
      }
    },
    created() {
      this.$nextTick(function () {
        this.getQrCode();
      })
    },
    methods:{
      getQrCode() {
        new QRCode(this.$refs.qrCodeDiv, {
          text: 'https://element.eleme.cn/?utm_source=gold_browser_extension#/zh-CN/component/installation',
          width: 200,
          height: 200,
          colorDark: "#555555", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
        })
      }
    },

  }
</script>
<style>
</style>