Qr Code 二维码生成器

用于生成并展示二维码。

全局配置

在全局配置组件属性。

QrCode组件属性配置

app.provide(QR_CODE_KEY, {
  size: 100,
  // others props...
});

基础用法

二维码参数

通过options参数，你可以设置二维码图片相关参数，更多参数请查阅qrcode。

属性&事件&插槽透传

Qr Code基于ElImage封装，所以你可以传入ElImage的所有属性、事件和插槽。

属性

属性名	说明	类型	默认值
content	二维码内容	string	—
size	二维码大小	number	100
options	二维码图片参数	QRCodeToDataURLOptions	100

类型声明

import type { ImageProps as ElImageProps } from 'element-plus';
import type { QRCodeToDataURLOptions } from 'qrcode';

export interface QrCodeProps {
  /**
   * 二维码内容
   */
  content: string;
  /**
   * 二维码大小
   * @defaultValue 100
   */
  size?: number;
  /**
   * 二维码图片参数
   */
  options?: QRCodeToDataURLOptions;
}

/**
 * 二维码组件包含透传属性在内的全部属性
 */
export type QrCodeFullProps = Partial<ElImageProps & QrCodeProps>;