二维码生成&点击按钮展示二维码-Toy模板网

这篇具有很好参考价值的文章主要介绍了二维码生成&点击按钮展示二维码。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

二维码生成&点击按钮展示二维码,前端,javascript,开发语言

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

2、引入

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

二维码生成&点击按钮展示二维码,前端,javascript,开发语言

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>