Vue3二维码的生成

1. • 使用 qrcode.vue

1.1效果

1.2使用

1. 安装 npm install --save qrcode.vue

2. 使用 全局注册使用

import { createApp } from 'vue'
import QrcodeVue from 'qrcode.vue'

createApp({
  data: {
    value: 'https://example.com',
  },
  template: '<qrcode-vue :value="value"></qrcode-vue>',
  components: {
    QrcodeVue,
  },
}).mount('#root')

3. 单独文件使用

<template>
  <div>
    <!-- 
      value: 就是扫二维码之后，要跳转的地方
      size: 就是二维码的长宽（即大小）
      level: 二维码容错率（类似于分别率）
      render-as： 使用canvas/svg 默认是canvas
      margin: 定义空白区的宽度(就是二维码的外层空白区)
      background： 二维码背景色
      foreground： 二维码前景色(就是二维码原本黑黑的东西）
      class： 传递给二维码根元素的类名
     -->
    <QrcodeVue
      :value="qr.logoSrc"
      :size="200"
      level="H"
      :margin="5"
      background="orange"
      foreground="red"
      class="qrCode"
    />
  </div>
</template>
  
<script lang="ts" setup>
import QrcodeVue from "qrcode.vue"
import {ref, reactive} from 'vue';

const qr = ref({
    logoSrc: 'https://typescript.bootcss.com/',
    appSrc: 'http://10.0.0.26:8080/temp.html?channel=jingrui&source=13#/donate/activity-home'
})
  
</script>
  
<style scoped>
.qrCode {
  border: solid 3px blueviolet;
}
</style>

但是这个组件是不可以添加图标之类的内容的