# QrCode 用于生成二維碼的組件 ## Usage ```vue <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** ```ts /** * 定義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** ```js { // logo圖片 src: string; // logo大小 logoSize: number; // 背景顏色 bgColor: string; // logo圓角 logoRadius: number; } ``` ## Methods | 名稱 | 回調參數 | 說明 | | -------- | --------------------------- | ---- | | download | `Function(fileName:string)` | 下載 | ## 事件 | 名稱 | 回調參數 | 說明 | | -------- | --------------------------- | ---- | | done | `(data: QrcodeDoneEventParams)=>void` | 繪制完成 | | error | `(error)=>void` | 生成二維碼時發生錯誤 | QrcodeDoneEventParams ```js { url: string; // 二維碼DataURL數據 ctx?: CanvasRenderingContext2D; // 該對象為畫布的2D渲染上下文，僅在tag為canvas時有效，可用于自定義繪制 } ``` `done` 事件回調中可以對二維碼進行自定義的繪制，示例代碼如下： ```vue <QrCode :value="qrCodeUrl" :width="200" @done="onQrcodeDone" /> ``` ```js 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](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D)