前端利用qrcodejs2封装二维码组件

KAGHQ

于 2021-07-19 21:26:02 发布

阅读量330

点赞数

CC 4.0 BY-SA版权

分类专栏： # Vue组件文章标签： vue

本文链接：https://blog.youkuaiyun.com/LRQQHM/article/details/118914674

Vue组件专栏收录该内容

7 篇文章

订阅专栏

该博客展示了如何在Vue组件中使用qrcodejs2库来生成二维码。代码中定义了一个名为QrCode的组件，该组件接收父组件传递的qrCodeUrl属性，并在页面加载后1秒生成相应内容的二维码。二维码的尺寸、颜色和错误校正级别均可定制，样式简洁，显示在一个带有边框的方块中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

QrCode.vue

<template>
  <el-col :span="4" class="d-flex flex-column mb14">
    <p>二维码
      <span><sp-icon type="sp-question" fontSize="14"></sp-icon></span>
    </p>
    <div class="out-div">
      <div id="qrcode" ref="qrCodeUrl"></div>
    </div>
</el-col>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  name: '',
  data () {
    return {}
  },
  created () {},
  mounted () {
    this.creatQrCode()
  },
  methods: {
    creatQrCode () {
      setTimeout(() => {
        // console.log(this.$attrs.qrCodeUrl)
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: this.$attrs.qrCodeUrl,
          width: 90,
          height: 90,
          colorDark: '#69a775',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      }, 1000)
    }
  }
}
</script>

<style scoped lang='stylus'>
.out-div
  width 100px
  height 100px
  border 2px solid #69a775
  display flex
  justify-content center
  align-items center
</style>

引入因为url在祖组件中

<qr-code v-bind="$attrs" v-on="$listeners"></qr-code>
import QrCode from '@/pages/components/QrCode.vue'
components: {
    QrCode
  },