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

属性	类型	默认值	可选值	说明
value	string	-	-	二维码地址
options	QRCodeRenderersOptions	-	-	二维码配置 ,见 QRCodeRenderersOptions
width	number	2	-	宽度
logo	string｜LogoType	-	-	中间 logo 配置，见 LogoType
tag	渲染标签	canvas	canvas | img	img 不支持内嵌 logo

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

名称	回调参数	说明
download	Function(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