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

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
  },