vue3中使用qrcode生成二维码

安装

npm install --save qrcode.vue 
or 
yarn add qrcode.vue

组件中使用

<script setup lang="ts">
import { useUiSetStore } from '@store/modules/uiSettings'
//导入二维码组件
import QrcodeVue from 'qrcode.vue'
const ui = useUiSetStore()
const payUrl = ref('')
</script>

<template>
  <footer-modal :visible="ui.fToolsQR">
    <div>
        <input v-model="payUrl" type="text" class="w-150" placeholder="输入要生成的数据" />
      </div>
      <div class="m-auto my-2 w-14"></div>
      <div class="m-auto my-2 w-14">二维码</div>
      <div v-if="payUrl === ''" class="m-a h-50 w-50"></div>
      <div v-else class="m-a h-50 w-50">
          //组件中使用
          <qrcode-vue :value="payUrl" :size="200" level="H" />
    </div>
  </footer-modal>
</template>

全局注册使用

//main.ts中注册全局组件
import QrCode from './components/QrCode.vue'
const app = createApp(App)
app.component('qr-code',QrCode)

//组件中使用
<qr-code :value="links" :size="150" id="canvasDom"></qr-code>

下载qrcode二维码

const downLoadQRcode = ():void => {
    const canvas = document.getElementById('canvasDom') as HTMLCanvasElement
    const url = canvas.toDataURL("image/png") // 通过 toDataURL 返回一个包含图片展示的 data URI 
    const aDom = document.createElement("a")
    aDom.download = state.linksName// 设置下载的文件名
    aDom.href = url
    document.body.appendChild(aDom)
    aDom.click()
    aDom.remove()
}