vue生成二维码图片

以下是两种Vue生成二维码图片的方法：

1.使用第三方库vue-qrcode生成二维码图片

npm install vue-qrcode --save

<template>
  <div>
    <qrcode-vue :value="qrCodeValue" :options="qrCodeOptions"></qrcode-vue>
  </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue'

export default {
  name: 'QrCode',
  components: {
    QrcodeVue
  },
  data () {
    return {
      qrCodeValue: 'https://www.example.com',
      qrCodeOptions: {
        typeNumber: 10,
        mode: 4,
        errorCorrectionLevel: 'M',
        margin: 10,
        scale: 1,
        width: 200,
        color: {
          dark: '#000000ff',
          light: '#ffffffff'
        }
      }
    }
  }
}
</script>

2.使用第三方库vue-qr生成二维码图片

npm install vue-qr --save

<template>
  <div>
    <vue-qr :logoSrc="imageUrl" text="https://www.example.com" :size="200"></vue-qr>
  </div>
</template>

<script>
import VueQr from 'vue-qr'

export default {
  name: 'QrCode',
  components: {
    VueQr
  },
  data () {
    return {
      imageUrl: require('@/assets/logo.png')
    }
  }
}
</script>