（vue3）vite 中二维码生成组件 vue-qr 的使用方法

一、npm 安装

npm install vue-qr --save

简写：

npm i vue-qr

二、在要使用的单文件组件中引入 vue-qr

import vueQr from 'vue-qr/src/packages/vue-qr.vue'

三、单文件中使用

text - - - 绑定要转换成二维码的文本内容
size - - - 可以设置二维码的大小
callback - - - 生成二维码后会执行的回调函数

<vue-qr :text="qrcodeVal" :size="280" :callback="getImgInfo"></vue-qr>

代码示例：

在一个输入框中填写内容，然后点击按钮，生成二维码

<script setup lang="ts">
import {
      
       ref } from 'vue'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

const textVal = ref('今天天晴')
const qrcodeVal = ref(textVal.value)

getQrCodeClick()

function getQrCodeClick() {
      
      
    qrcodeVal.value = textVal.value
}

function getImgInfo(qrUrl: string) {
      
      
  // 可以根据需求进行一些处理
  console.log(qrUrl)
}
</script>

<template>
  <div class="exampe">
      <div class="select-row">
        <input class="qr-input" type="text" v-model="textVal" />
        <el-button type="primary" class="getBtn" @click="getQrCodeClick"
          >生成</el-button>
      </div>
      <div class="qrcode-img">
          <vue-qr :text="qrcodeVal" :size="280" :callback="getImgInfo"></vue-qr>
     </div>
  </div>
</template>

<style lang="scss" scoped>
.qr-input {
      
      
  width: vw(751);
  height: vw(80);
  padding: 0 vw(19);
  color: #fff;
  font-size: vw(24);
  border-radius: vw(8);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: none;
}
.qrcode-img {
      
      
  width: vw(280);
  height: vw(280);
  margin: vw(175) auto 0;
  border-radius: vw(24);
  overflow: hidden;
  img {
      
      
    display: block;
    width: 100%;
    height: 100%;
  }
}
</style>

展示效果：

更多详细使用方法可查看：
https://www.npmjs.com/package/vue-qr