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