uView Next

# Qrcode 二维码 新

二维码生成插件，可扩展性高，它支持自定义渲染二维码，可通过uQRCode API得到二维码绘制关键信息后，使用canvas、svg或js操作dom的方式绘制二维码图案。还可自定义二维码样式，如随机颜色、圆点、方块、块与块之间的间距等。

# 平台差异说明

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

# 基本使用

直接引入即可使用

  • 通过value配置二维码内容
<u-qrcode value="https://uveiw.bdxmz.cn/"></u-qrcode>

✅ Copy success!

直接引入即可使用

  • 通过options配置二维码参数
<u-qrcode value="https://uveiw.bdxmz.cn/" :options="{ 
   foregroundImageSrc:'https://uveiw.bdxmz.cn/common/logo.png', 
   foregroundImageBackgroundColor:'none' 
}"></u-qrcode>

✅ Copy success!

# 改变颜色和样式

  • 通过options配置二维码参数
<u-qrcode value="https://uveiw.bdxmz.cn/" :options="{ foregroundColor: '#3eaf7c' }"></u-qrcode>
<u-qrcode value="https://uveiw.bdxmz.cn/" :options="{ style: 'liquid'}"></u-qrcode>
<u-qrcode value="https://uveiw.bdxmz.cn/" :options="{ style: 'round'}"></u-qrcode>
<u-qrcode value="https://uveiw.bdxmz.cn/" :options="{ style: 'words', words: '打开手机扫一扫' }"></u-qrcode>

✅ Copy success!

# 此页面源代码地址

页面源码地址


 github  gitee

# API

# Props

参数 说明 类型 默认值 可选值
value 二维码内容 (start为true时必填) String - -
size 二维码尺寸 String | Number - -
options 二维码配置选项（见下表） Object - 详见 https://uqrcode.cn/doc/document/native.html
fileType 导出的文件类型 String png -
start 是否初始化组件后就开始生成 Boolean true false
auto 是否数据发生改变自动重绘 Boolean false true
hide 隐藏组件。如果只需要导出二维码作为图片使用，可设置为true，不能在组件或组件父级元素设置v-if="false"、v-show="false"、style="display:none;"等实现隐藏效果，这样会导致导出二维码空白 Boolean false true
queue 队列绘制 Boolean false true
isQueueLoadImage 是否队列加载图片，选择true将通过队列缓存所需要加载的图片。优点是加载重复资源可减少资源请求次数，节省网络资源，缺点是会转化为同步请求，资源不重复且多的情况下，等待时间会更久。总之，请求重复资源较多则选择true，请求不重复资源较多则选择false Boolean false true
loading loading态 Boolean false true
h5SaveIsDownload H5保存即自动下载（在支持的环境下），默认false为仅弹层提示用户需要长按图片保存，不会自动下载 Boolean false -
h5DownloadName H5下载名称 String - -
h5SaveTip H5保存二维码时候是否显示提示 Boolean - -

# options 参数说明

参数名 说明 类型 默认值 必填
data 二维码对应内容 string '' 是
size 二维码大小 number 200 否
useDynamicSize 是否使用动态尺寸，可去掉方块小数点，提升美观度。实际尺寸会变化，需通过实例获取动态尺寸数值及时重设画布 boolean false 否
dynamicSize 动态尺寸数值，useDynamicSize为true时自动计算 number undefined 否
typeNumber 二维码版本，-1为自动计算 number -1 否
errorCorrectLevel 二维码纠错等级 number UQRCode.errorCorrectLevel.H 否
margin 二维码边距 number 0 否
areaColor 二维码绘制区域颜色、底部背景色 string #FFFFFF 否
backgroundColor 二维码背景色 string rgba(255,255,255,0) 否
backgroundImageSrc 二维码背景图片地址 string undefined 否
backgroundImageWidth 二维码背景图片宽度 number size 否
backgroundImageHeight 二维码背景图片高度 number size 否
backgroundImageX 二维码背景图片X坐标 number 0 否
backgroundImageY 二维码背景图片Y坐标 number 0 否
backgroundImageAlpha 二维码背景图片透明度 number 1 否
backgroundImageBorderRadius 二维码背景图片圆角值 number 0 否
backgroundPadding 二维码背景码点内边距(0.0-1.0) number 0.0 否
foregroundColor 二维码前景色 string #000000 否
foregroundImageSrc 二维码前景图片地址 string undefined 否
foregroundImageWidth 二维码前景图片宽度 number size / 4 否
foregroundImageHeight 二维码前景图片高度 number size / 4 否
foregroundImageX 二维码前景图片X坐标 number 居中 否
foregroundImageY 二维码前景图片Y坐标 number 居中 否
foregroundImagePadding 二维码前景图边距填充 number 0 否
foregroundImageBackgroundColor 二维码前景图背景颜色 string #FFFFFF 否
foregroundImageBorderRadius 二维码前景图边框圆角值 number 0 否
foregroundImageShadowOffsetX 二维码前景图阴影水平偏移值 number 0 否
foregroundImageShadowOffsetY 二维码前景图阴影垂直偏移值 number 0 否
foregroundImageShadowBlur 二维码前景图阴影模糊度 number 0 否
foregroundImageShadowColor 二维码前景图阴影颜色 string #808080 否
foregroundPadding 二维码前景码点内边距(0.0-1.0) number 0.0 否
positionProbeBackgroundColor 二维码定位角图案背景色 string 同backgroundColor 否
positionProbeForegroundColor 二维码定位角图案前景色 string 同foregroundColor 否
separatorColor 二维码分割图案颜色 string 同foregroundColor 否
positionAdjustBackgroundColor 二维码对齐图案背景色 string 同backgroundColor 否
positionAdjustForegroundColor 二维码对齐图案前景色 string 同foregroundColor 否
timingBackgroundColor 二维码时序图案背景色 string 同backgroundColor 否
timingForegroundColor 二维码时序图案前景色 string 同foregroundColor 否
typeNumberBackgroundColor 二维码版本图案背景色 string 同backgroundColor 否
typeNumberForegroundColor 二维码版本图案前景色 string 同foregroundColor 否
darkBlockColor 二维码暗块颜色 string 同foregroundColor 否

← Cropper 图片剪裁 →