Qrcode 二维码 3.1.51

根据提供的字符串前端JS生成二维码展示

注意

需要uview-ultra版本v3.1.50以上版本

使用场景

• 展示二维码场景

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

基本使用

• 通过size和val设置二维码的大小和内容
• 通过background和foreground设置二维码颜色
• 通过icon设置二维码中间的logo图片

<template>
	<view>
		<up-qrcode :size="200" val="uview-ultra"></up-qrcode>
        <up-qrcode :size="200" val="uview-ultra" icon="https://uview-ultra.jiangruyi.com/uview-ultra/common/logo.png"></up-qrcode>
        <up-qrcode :size="200" val="uview-ultra" background="red" foreground="blue"></up-qrcode>
	</view>
</template>

加载状态

由于二维码使用前端JS计算生成，因此会有一个计算时间。

• showLoading参数配置是否显示加载状态

<template>
	<view>
		<up-qrcode :size="200" val="uview-ultra" showLoading loadingText="loading..."></up-qrcode>
	</view>
</template>

右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码

 github  gitee

API

Props

参数	说明	类型	默认值	可选值
cid	实例ID字符串(必须)	String		-
size	二维码大小	Intger	200	-
val	二维码内容	String
background	背景色	String	#ffffff	-
foreground	前景色	String	#000000
icon	二维码中间图标	String
showLoading	显示加载状态	Boolean	true	false
loadingText	加载中提示语	String	二维码生成中

Events

事件名	说明	回调参数
result	二维码生成成功
longpress	长按事件