在对于二维码生成中有许多组件,下面介绍关于自定义比较高的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',}}
完结撒花 🎉🎉🎉