QRCode 二维码

引入

import PressQRCode from 'press-ui/press-q-r-code/press-q-r-code';

export default {
  components: {
    PressQRCode,
  }
}

PressQRCode 在微信小程序使用了 weapp-qrcode-canvas-2d 库，其他端使用了 uqrcodejs，请自行下载。

代码演示

基础用法

<PressQRCode
  :value="value"
  :size="size"
/>

export default {
  data() {
    return {
      value: 'https://novlan1.github.io/press-ui/',
      size: 200,
    }
  }
}

API

Props

参数	说明	类型	默认值
value	二维码值	string	-
size	二维码尺寸，单位 px	number	287
margin	边框距离	number	0
init-h5-attr	H5 下，是否将 size/margin 传给原始组件	boolean	false
vue3-image	Vue3 时，是否使用 image 模式，即转为 image，这时会将 width/height 设为父元素的宽高	boolean	false

Events

事件名	说明	参数
result	生成成功	img
longPressImage	长按图片	img

在线调试

常见问题

尺寸单位

由于使用了三方库，size 仅支持 px 单位，如果业务使用了 rpx/rem 等单位，可以自行转换成 px 后传入。

下面是一个例子：

const windowInfo = uni.getWindowInfo();
const cliWidth = systemInfo.windowWidth || 375;

if (this.isMPQQ) {
  this.qrSize = 4.76 * cliWidth / 10;
} else {
  // 目标是 238
  this.qrSize = 4.76 * 50 * (cliWidth / 375);
}

另外，size 不能为0，否则二维码将不能显示。