(vue3) How to use the QR code generation component vue-qr in vite

1. npm installation

npm install vue-qr --save

Shorthand:

npm i vue-qr

2. Introduce vue-qr in the single-file component to be used

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

3. Use in a single file

text - - - Bind the text content to be converted into a QR code
size - - - You can set the size of the QR code
callback - - - The callback function that will be executed after the QR code is generated

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

Code example:

Fill in the content in an input box, and then click the button to generate a QR code

<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>

Display of results:

More detailed usage methods can be viewed:
https://www.npmjs.com/package/vue-qr