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()
}
posted @   少年。  阅读(2747)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示