Vben Admin

QrCode

用于生成二维码的组件

Usage

<template>
  <QrCode :value="qrCodeUrl" />
</template>
<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';
  import { QrCode, QrCodeActionType } from '/@/components/Qrcode/index';
  import LogoImg from '/@/assets/images/logo.png';
  const qrCodeUrl = 'https://www.vvbin.cn';
  export default defineComponent({
    components: { QrCode },
    setup() {
      const qrRef = ref<Nullable<QrCodeActionType>>(null);
      function download() {
        const qrEl = unref(qrRef);
        if (!qrEl) return;
        qrEl.download('文件名');
      }
      return {
        qrCodeUrl,
        LogoImg,
        download,
        qrRef,
      };
    },
  });
</script>
<style scoped>
  .qrcode-demo-item {
    width: 30%;
    margin-right: 1%;
  }
</style>

Props

属性类型默认值可选值说明
valuestring--二维码地址
optionsQRCodeRenderersOptions--二维码配置 ,见 QRCodeRenderersOptions
widthnumber2-宽度
logostring｜LogoType--中间 logo 配置，见 LogoType
tag渲染标签canvas`canvasimg`

QRCodeRenderersOptions

    /**
     * 定义margin的宽度。.
     * Default: 4
     */
    margin?: number;
    /**
     * 比例因子。值1表示每个模块1像素（黑点）。
     * Default: 4
     */
    scale?: number;
    /**
     * 为输出图像强制指定宽度。
     * 如果宽度太小而不能包含qr符号，则此选项将被忽略。
     * 优先于规模。
     */
    width?: number;
    color?: {
        /**
         * 暗模块的颜色。值必须为十六进制格式（RGBA）.
         * 注意：深色应始终比color.light暗。.
         * Default: #000000ff
         */
        dark?: string;
        /**
         * 照明模块的颜色。值必须为十六进制格式（RGBA）.
         * Default: #ffffffff
         */
        light?: string;
    };

LogoType

{
  // logo图片
  src: string;
  // logo大小
  logoSize: number;
  // 背景颜色
  bgColor: string;
  // logo圆角
  logoRadius: number;
}

Methods

名称回调参数说明
downloadFunction(fileName:string)下载

事件

名称回调参数说明
done(data: QrcodeDoneEventParams)=>void绘制完成
error(error)=>void生成二维码时发生错误

QrcodeDoneEventParams

{
  url: string;  // 二维码DataURL数据
  ctx?: CanvasRenderingContext2D;  // 该对象为画布的2D渲染上下文，仅在tag为canvas时有效，可用于自定义绘制
}

done事件回调中可以对二维码进行自定义的绘制，示例代码如下：

<QrCode
    :value="qrCodeUrl"
    :width="200"
    @done="onQrcodeDone"
  />

function onQrcodeDone({ ctx }) {
    if (ctx instanceof CanvasRenderingContext2D) {
      // 额外绘制
      ctx.fillStyle = 'black';
      ctx.font = '16px "微软雅黑"';
      ctx.textBaseline = 'bottom';
      ctx.textAlign = 'center';
      ctx.fillText('你帅你先扫', 100, 195, 200);
    }
  }

有关CanvasRenderingContext2D的更多资料以及绘制方法，请参考MDN