当前位置：首页 > news >正文

vue-qr在线生成二维码组件(vue2版本)

news 2025/8/15 6:46:09

在对于二维码生成中有许多组件，下面介绍关于自定义比较高的vue-qr组件，能自定义设置背景颜色、背景图片、背景Gif图、实点和空白区的颜色、中心Logo的图片和边距。

依赖下载

注意： 直接npm下载最新版有些项目可能运行会抱错这时候你可以降版本

npm install vue-qr --save

可以使用3.2.4版本

npm install -s vue-qr@3.2.4

使用教程

效果图

在这里插入图片描述

完整代码

<template><el-dialogv-if="payQrCodeFlag":visible.sync="payQrCodeFlag":close-on-click-modal="false":close-on-press-escape="false"top="10vh"width="700px"title="支付二维码"><div style="display: flex; align-items: center; justify-content: center"><vue-qr :text="payQrCodeUrl" colorDark="#409EFF" colorLight="#fff" :correctLevel="2" :logoSrc="image" :logoScale="0.3" :size="200"></vue-qr></div></el-dialog>
</template><script>
import vueQr from 'vue-qr'
export default {components: {  vueQr },data() {return {image: require('../../../../static/img/pay.png'),payQrCodeFlag:false,payQrCodeUrl:'8899',}}