二维码生成点击按钮展示二维码

news2024/11/27 8:42:45

使用HBuider
1.先安装插件
(地址 :  https://ext.dcloud.net.cn/plugin?id=1287)

这里直接就安装到了uni-modules里面了

2、引入

import uQRCode from ‘@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue’

3、代码实现
 

<template>
   <view>
<!-- 渲染数据 -->
		<view class="u-demo-block__content wrap" v-for="item in filteredList" :key="item.id">
			<u-row class="contentbox">
				<u-col span="12" class="action-item">
					<view><text class="info">xxx:</text>{{item.outbound.udeptName}}</view>
				  <view class="button">
				 <!-- 点击二维码出来 @click="click(item)" -->
						<button class="button-item" type="primary" @click="click(item)">二维码显示</button>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- 二维码 -->
		<view>
		<!-- 弹框 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<uqrcode ref="uQRCode" :mode="mode" :value="text" :size="size" :margin="margin" canvasId="item.id"
						background-color="backgroundColor" :foreground-color="foregroundColor" :typeNumber="typeNumber"
						:fileType="fileType" />
				  </view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
	import {receive} from '@/api/xxx/index'  
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue'
	export default {
		data() {
			return {
				mode: 'canvas',//也可以是view
				text: 'test',//也可以写网址,直接生成对应的二维码
				size: 140,
				margin: 10,
				backgroundColor: '#FFFFFF',
				foregroundColor: '#000000',
				//errorCorrectLevel: uQRCode.errorCorrectLevel.H,  
				typeNumber: -1,
				fileType: 'png',
				defaultErrorCorrectLevel: uQRCode.errorCorrectLevel,
				type: 'center', //弹框在中央
			}
		},
		methods: {
		 // 请求数据
			getReceive() {
				receive().then(res => {
					this.receiveList = res.rows;
				}).catch((error) => {})
			},
			//点击二维码出来
			click(item) {
				console.log(item);
				//这里把数据的id赋值给text,绑定到上面,这样点击就是对应的二维码
				this.text = item.outbound.id;
				console.log(this.text);
				this.$refs.popup.open("center")  //这里是弹框在最中央
			}
	}
</script>
<style>
	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 30px;
		height: 180px;
		width: 180px;
		background-color: #fff;
	}
</style>

4.开发中使用

弹框用到了uni-app提供的uni-popup弹框,把二维码放到内容那块,替换即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/976618.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

下载git

1.官网下载可能会有访问失败 2.用其他的镜像源下载 快 准 狠 CNPM Binaries Mirror

python3 简易 http server:实现本地与远程服务器传大文件

在个人目录下创建新文件httpserver.py &#xff1a; vim httpserver.py文件内容为python3代码&#xff1a; # !/usr/bin/env python3 import datetime import email import html import http.server import io import mimetypes import os import posixpath import re import…

1200V的SiC - Trench - MOSFET的性能和耐久性

标题&#xff1a;Performance and Ruggedness of 1200V SiC - Trench - MOSFET 摘要 本文介绍了一种新颖的SiC沟槽MOSFET概念。该器件旨在平衡低导通损耗和Si-IGBT类似的可靠性。介绍了45 mΩ/1200 V CoolSiCTM MOSFET的静态和动态性能以及短路能力的基本特点。在状态电阻的有…

JAVA数组、String与集合详解

目录 1. 数组 1.1 初始化 1.2 遍历 1.3 数组执行原理 1.4 Arrays操作数组 2. String字符串 3. 集合 3.1 Collection 3.1.1 常用方法 3.1.2 分类 3.1.3 遍历方式 3.1.4 List 3.1.5 Set 3.1.6 适用场景 3.1.7 Collection总结 3.2 Collection其他操作 3.2.1 并发修…

系统配置与性能评价

系统配置与性能评价 考点概况性能指标性能评价方法阿姆达尔解决方案 考点概况 性能指标 标红的常考 了解性能指标对应哪一个的 性能指标是干嘛的 网络和路由器都有吞吐量&#xff0c;优先选择网络 d 数据处理速度&#xff1a;PDR c D A 根据选项去选择最合适的就行 B和D都是网…

把DTC从Excel导入cdd的方法

本文是基于CANdelaStudio12.0讲解 问题一&#xff1a;当导入DTC的xxx.cdi文件报如下红色错误 可能原因&#xff1a;在设置具有下拉框的属性的内容时&#xff0c;输入的内容不在下拉框列表中 解决办法:在.cddt文件中更新“”Error Code Table“”内容&#xff0c;把新的选项更新…

Matlab信号处理2:方波信号的合成与分解

周期信号可展开为傅里叶级数&#xff0c;因此方波信号可用若干谐波去拟合。以下是Matlab的实现&#xff1a; %% 方波信号的分解% 1.生成方波信号 % 方波信号周期、基波频率 T0 2; w0 (2 * pi) / T0; % 方波信号值为1的区间 T1 0.5; % 绘图周期&#xff1a;(2*n1)个周期 n …

SpringBoot项目--电脑商城【用户注册】

1.创建数据表 1.1 创建t_user表 CREATE TABLE t_user (uid INT AUTO_INCREMENT COMMENT 用户id,username VARCHAR(20) NOT NULL UNIQUE COMMENT 用户名,password CHAR(32) NOT NULL COMMENT 密码,salt CHAR(36) COMMENT 盐值,phone VARCHAR(20) COMMENT 电话号码,email VARCH…

S7-1500/ET200MP 使用 TIA STEP7 进行自由口通讯

1. 硬件列表 2. 组态和配置 1) 新建项目 2) 创建CPU1500站点 3) 组态CM PtP 串口 4) 设置协议自由口 3. 编写通信程序 1) 逻辑地址的填写 2) 调用发送接收功能块 3) 创建发送DB块和接收DB块 4. 设备连接 5. 通信测试 1) 设置串口调试调试软件SSCOM32 2)…

某米ax3000路由器组网解析

我们使用某米k60手机与某米ax3000 wifi6路由器组网&#xff0c;来分析和学习网络速率与瓶颈限制。 某米 AX3000 路由器简介 某米 AX3000 路由器是一款支持 WiFi 6 的双频路由器&#xff0c;它的 MIMO 是 22&#xff0c;也就是两根天线。MIMO 是 Multiple Input Multiple Outpu…

[hpsupport@privatemail.com].Elbie勒索病毒的最新威胁:如何恢复您的数据?

引言&#xff1a; 随着技术的不断发展&#xff0c;网络犯罪分子也在不断进化和改进他们的方法&#xff0c;其中之一就是恶名昭著的勒索病毒。最近&#xff0c;出现了一种新的威胁&#xff0c;名为 [ hpsupportprivatemail.com ].Elbie 勒索病毒。让我们一起深入探索这个威胁&am…

拥抱国产化,生态软件信创兼容适配之路

国产化是指技术引进项目投产后所生产的产品中&#xff0c;国内生产件的数量占整件产品生产件数量。换句话说&#xff0c;软件国产化的占比&#xff0c;直接影响到技术是否会在某一个时点上被”卡脖子“。 随着国家经济的发展和技术水平的提高&#xff0c;国家整体实力大大增强…

视频集中存储/直播点播平台EasyDSS点播文件分类功能新升级

视频推拉流EasyDSS视频直播点播平台&#xff0c;集视频直播、点播、转码、管理、录像、检索、时移回看等功能于一体&#xff0c;可提供音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务。 TSINGSEE青犀视频的EasyDSS平台具有点播文件分类展示方法&#xf…

深入synchronized

##深入synchronized 2.1 类锁、对象锁 synchronized的使用一般就是同步方法和同步代码块。 synchronized的锁是基于对象实现的。 如果使用同步方法 static&#xff1a;此时使用的是当前类.class作为锁&#xff08;类锁&#xff09; 非static&#xff1a;此时使用的是当前对…

【网络安全带你练爬虫-100练】第23练:文件内容的删除+写入

目录 0x00 前言&#xff1a; 0x02 解决&#xff1a; 0x00 前言&#xff1a; 本篇博文可能会有一点点的超级呆 0x02 解决&#xff1a; 你是不是也会想&#xff1a; 使用pyrhon将指定文件夹位置里面的1.txt中数据全部删除以后---->然后再将参数req_text的值写入到1.txt …

【C++】反向迭代器精讲(以lIst为例)

目录 二&#xff0c;全部代码 三&#xff0c;设计思路 1. 讨论 2. 关于迭代器文档一个小细节 结语 一&#xff0c;前言 如果有小伙伴还未学习普通迭代器&#xff0c;请参考这篇文章中的普通迭代器实现。 【STL】list用法&试做_底层实现_花果山~~程序猿的博客-CSDN…

Android架构 架构和 CPU ABI - NDK

查看设备架构 adb -s emulator-5554 shell getprop ro.product.cpu.abi C:\Users\liyd>adb -s emulator-5554 shell getprop ro.product.cpu.abi x86_64C:\Users\liyd>adb -s 804c11f1 shell getprop ro.product.cpu.abi arm64-v8amumu模拟器12 C:\Users\liyd>adb …

MobaXterm 突破14个session限制

通常情况下&#xff1a;随着工作时间的增长&#xff0c;我们会保存许许多多的linux到本地的mobastream&#xff0c;然后当超过14个&#xff0c;就会被被限制&#xff0c;这个会让人很头疼。 1. 安装python&#xff0c;配置好环境变量 测试安装成功&#xff1a; 2. 基于项目进行…

uniapp点击事件在小程序中无法传参

这个问题很是神奇&#xff0c;第一次遇到。在h5中&#xff0c;点击事件可以正常传参&#xff0c;打包小程序后确失效了。 修改&#xff1a;for循环中的key&#xff0c;使用 index就好了

视频汇聚/视频云存储/视频监控管理平台EasyCVR启动时打印starting server:listen tcp,该如何解决?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;可实现视频监控直播、视频轮播、视频录像、云存储、回放与检索、智能告警、服务器集群、语音对讲、云台控制、电子地图、H.265自动转码H.264、平台级联等。为了便于用户二次开发、调用与集成&#xff0c;…