Vben AdminQrCode
用于生成二维码的组件
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