使用qrcodejs2插件生成支付二维码

2023-11-22 12:40

本文主要是介绍使用qrcodejs2插件生成支付二维码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

·需求:后端给二维码内容链接,前端把链接转为二维码,二维码超时可点击按钮刷新二维码
在这里插入图片描述
·html

<template><div class="wechat"><div ref="qrCode" v-loading="loading" class="qrCode"></div><p>请使用微信扫描二维码支付,请在5分钟内完成支付,过期请刷新支付码</p><el-button @click="refresh">刷新二维码</el-button></div>
</template>

·JS

<script>
import QRCode from "qrcodejs2";export default {data() {return {qrCode: null,};},props: ["wxPayCode", "loading"],//wxPayCode是外层组件传入链接内容;loading是加载二维码的动画methods: {refresh() {//调用外层组件请求二维码链接内容的函数,重新请求二维码链接this.$emit("getWxPayCode", "wx");},crateQrcode() {if (this.qrCode) {// 二维码过期,需要清空二维码容器,再次请求//一定要清空容器!!!this.$refs.qrCode.innerHTML = "";this.qrCode = new QRCode(this.$refs.qrCode, {width: 106,height: 103, // 高度text: this.wxPayCode, // 二维码内容// render: 'canvas' // 设置渲染方式(有两种方式 table和canvas,默认是canvas)// background: '#f0f',// foreground: '#ff0'});// console.log(qr)} else {this.qrCode = new QRCode(this.$refs.qrCode, {width: 106,height: 103, // 高度text: this.wxPayCode, // 二维码内容// render: 'canvas' // 设置渲染方式(有两种方式 table和canvas,默认是canvas)// background: '#f0f',// foreground: '#ff0'});// console.log(qr);}},},watch: {wxPayCode(newValue, oldValue) {if (newValue) {this.$nextTick(() => {this.crateQrcode();});}},},
};
</script>

·css

<style lang="scss">
.wechat {width: 100%;height: 250px;display: flex;align-items: flex-end;flex-wrap: wrap;justify-content: center;.qrCode {width: 106px;height: 103px;display: inline-block;background-color: #ccc;}p {font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(153, 153, 153, 1);line-height: 17px;margin-top: 14px;width: 100%;text-align: center;}.el-button {width: 100px;height: 36px;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #3071fe;line-height: 20px;padding: 0;border: 1px solid #3071fe;background: #deecff;border-radius: 0;}
}
</style>

·第一次使用时遇到的坑
①页面元素必须使用ref=“string”,用于获取需要渲染二维码的元素
②如果有点击刷新二维码的需求,刷新二维码之前一定要清空包裹二维码容器的内容(npm插件库中qrcodejs2(0.0.2版本)可以使用qrCode.clear()方法清除之前的二维码,我使用时报错,找不到clear方法)
③第一次做这种功能,不足之处,留言指出

这篇关于使用qrcodejs2插件生成支付二维码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/410219

相关文章

Java Lambda表达式的使用详解

《JavaLambda表达式的使用详解》:本文主要介绍JavaLambda表达式的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、前言二、Lambda表达式概述1. 什么是Lambda表达式?三、Lambda表达式的语法规则1. 无参数的Lambda表

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解

详解如何使用Python构建从数据到文档的自动化工作流

《详解如何使用Python构建从数据到文档的自动化工作流》这篇文章将通过真实工作场景拆解,为大家展示如何用Python构建自动化工作流,让工具代替人力完成这些数字苦力活,感兴趣的小伙伴可以跟随小编一起... 目录一、Excel处理:从数据搬运工到智能分析师二、PDF处理:文档工厂的智能生产线三、邮件自动化:

Spring @RequestMapping 注解及使用技巧详解

《Spring@RequestMapping注解及使用技巧详解》@RequestMapping是SpringMVC中定义请求映射规则的核心注解,用于将HTTP请求映射到Controller处理方法... 目录一、核心作用二、关键参数说明三、快捷组合注解四、动态路径参数(@PathVariable)五、匹配请

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现:样式与表格的深度复制1. 表格复制(含样式与内容)2

Java 枚举的基本使用方法及实际使用场景

《Java枚举的基本使用方法及实际使用场景》枚举是Java中一种特殊的类,用于定义一组固定的常量,枚举类型提供了更好的类型安全性和可读性,适用于需要定义一组有限且固定的值的场景,本文给大家介绍Jav... 目录一、什么是枚举?二、枚举的基本使用方法定义枚举三、实际使用场景代替常量状态机四、更多用法1.实现接

springboot项目中使用JOSN解析库的方法

《springboot项目中使用JOSN解析库的方法》JSON,全程是JavaScriptObjectNotation,是一种轻量级的数据交换格式,本文给大家介绍springboot项目中使用JOSN... 目录一、jsON解析简介二、Spring Boot项目中使用JSON解析1、pom.XML文件引入依

Java中的record使用详解

《Java中的record使用详解》record是Java14引入的一种新语法(在Java16中成为正式功能),用于定义不可变的数据类,这篇文章给大家介绍Java中的record相关知识,感兴趣的朋友... 目录1. 什么是 record?2. 基本语法3. record 的核心特性4. 使用场景5. 自定

Python使用Tkinter打造一个完整的桌面应用

《Python使用Tkinter打造一个完整的桌面应用》在Python生态中,Tkinter就像一把瑞士军刀,它没有花哨的特效,却能快速搭建出实用的图形界面,作为Python自带的标准库,无需安装即可... 目录一、界面搭建:像搭积木一样组合控件二、菜单系统:给应用装上“控制中枢”三、事件驱动:让界面“活”

python如何生成指定文件大小

《python如何生成指定文件大小》:本文主要介绍python如何生成指定文件大小的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python生成指定文件大小方法一(速度最快)方法二(中等速度)方法三(生成可读文本文件–较慢)方法四(使用内存映射高效生成