uview-plus

# Qrcode 二维码 3.1.51

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

注意

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

# 使用场景

  • 展示二维码场景

# 平台差异说明

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

# 基本使用

  • 通过size和val设置二维码的大小和内容
  • 通过background和foreground设置二维码颜色
  • 通过icon设置二维码中间的logo图片
<template>
	<view>
		<up-qrcode :size="200" val="uview-plus"></up-qrcode>
        <up-qrcode :size="200" val="uview-plus" icon="https://uview-plus.jiangruyi.com/uview-plus/common/logo.png"></up-qrcode>
        <up-qrcode :size="200" val="uview-plus" background="red" foreground="blue"></up-qrcode>
	</view>
</template>

# 加载状态

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

  • showLoading参数配置是否显示加载状态
<template>
	<view>
		<up-qrcode :size="200" val="uview-plus" 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 长按事件

←