20260720172840

2026-07-20 17:28:47 +08:00
1 parent cda7f16d3a
commit 94207c77ff
@@ -0,0 +1,24 @@
+# Advanced Usage
+
+## Description (en-US)
+
+With Popover.
+
+## Source
+
+```vue
+<script setup lang="ts">
+defineOptions({ name: 'Popover' })
+</script>
+
+<template>
+  <a-popover>
+    <template #content>
+      <a-qrcode value="https://ant.design" :bordered="false" />
+    </template>
+    <a-button type="primary">
+      Hover me
+    </a-button>
+  </a-popover>
+</template>
+```
@@ -0,0 +1,30 @@
+# _semantic
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SemanticPreview } from '@/components/semantic'
+import { useComponentLocale } from '@/composables/use-locale'
+import { locales } from '../locales'
+
+const { t } = useComponentLocale(locales)
+
+const semantics = computed(() => [
+  { name: 'root', desc: t('root') },
+  { name: 'cover', desc: t('cover') },
+])
+</script>
+
+<template>
+  <SemanticPreview
+    component-name="QRCode"
+    :semantics="semantics"
+  >
+    <template #default="{ classes }">
+      <a-qrcode value="https://ant.design" status="loading" :classes="classes" />
+    </template>
+  </SemanticPreview>
+</template>
+```
@@ -0,0 +1,22 @@
+# base
+
+## Description (en-US)
+
+Basic Usage.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const text = ref('https://www.antdv-next.com')
+</script>
+
+<template>
+  <a-space direction="vertical" align="center">
+    <a-qrcode :value="text || '-'" />
+    <a-input v-model:value="text" placeholder="-" :maxlength="60" />
+  </a-space>
+</template>
+```
@@ -0,0 +1,23 @@
+# Custom Color
+
+## Description (en-US)
+
+Custom Color.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { theme } from 'antdv-next'
+
+const { useToken } = theme
+const { token } = useToken()
+</script>
+
+<template>
+  <a-space>
+    <a-qrcode value="https://www.antdv-next.com" :color="token.colorSuccessText" />
+    <a-qrcode value="https://www.antdv-next.com" :color="token.colorInfoText" :bg-color="token.colorBgLayout" />
+  </a-space>
+</template>
+```
@@ -0,0 +1,63 @@
+# Custom Size
+
+## Description (en-US)
+
+Custom Size.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { MinusOutlined, PlusOutlined } from '@antdv-next/icons'
+import { shallowRef } from 'vue'
+
+const size = shallowRef(160)
+const MIN_SIZE = 48
+const MAX_SIZE = 300
+function increase() {
+  const fn = (prevSize: number) => {
+    const newSize = prevSize + 10
+    if (newSize >= MAX_SIZE) {
+      return MAX_SIZE
+    }
+    return newSize
+  }
+  size.value = fn(size.value)
+}
+
+function decline() {
+  const fn = (prevSize: number) => {
+    const newSize = prevSize - 10
+    if (newSize <= MIN_SIZE) {
+      return MIN_SIZE
+    }
+    return newSize
+  }
+  size.value = fn(size.value)
+}
+</script>
+
+<template>
+  <a-space-compact class="mb-16px">
+    <a-button :disabled="size <= MIN_SIZE" @click="decline">
+      <template #icon>
+        <MinusOutlined />
+      </template>
+      Smaller
+    </a-button>
+    <a-button :disabled="size >= MAX_SIZE" @click="increase">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      Larger
+    </a-button>
+  </a-space-compact>
+  <a-qrcode
+    error-level="H"
+    :size="size"
+    :icon-size="size / 4"
+    value="https://antdv-next.com/"
+    icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+  />
+</template>
+```
@@ -0,0 +1,54 @@
+# custom status render
+
+## Description (en-US)
+
+You can control the rendering logic of the QR code in different states through the value of `statusRender`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { CheckCircleFilled, CloseCircleFilled, ReloadOutlined } from '@antdv-next/icons'
+
+const value = 'https://antdv-next.com'
+</script>
+
+<template>
+  <a-flex gap="middle" wrap>
+    <a-qrcode :value="value" status="loading">
+      <template #statusRender="info">
+        <template v-if="info.status === 'loading'">
+          <a-space direction="vertical">
+            <a-spin />
+            <p>Loading...</p>
+          </a-space>
+        </template>
+      </template>
+    </a-qrcode>
+    <a-qrcode :value="value" status="expired" @refresh="() => console.log('refresh')">
+      <template #statusRender="info">
+        <template v-if="info.status === 'expired'">
+          <div>
+            <CloseCircleFilled style="color: red" /> {{ info?.locale?.expired }}
+            <p>
+              <a-button type="link" @click="info?.onRefresh">
+                <ReloadOutlined /> {{ info?.locale?.refresh }}
+              </a-button>
+            </p>
+          </div>
+        </template>
+      </template>
+    </a-qrcode>
+
+    <a-qrcode :value="value" status="scanned">
+      <template #statusRender="info">
+        <template v-if="info.status === 'scanned'">
+          <div>
+            <CheckCircleFilled style="color:green" /> {{ info?.locale?.scanned }}
+          </div>
+        </template>
+      </template>
+    </a-qrcode>
+  </a-flex>
+</template>
+```
@@ -0,0 +1,53 @@
+# Download QRCode
+
+## Description (en-US)
+
+A way to download QRCode.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { QRCodeProps } from 'antdv-next'
+import { ref, useTemplateRef } from 'vue'
+
+const renderType = ref<QRCodeProps['type']>('canvas')
+const qrcodeRef = useTemplateRef('qrcode')
+function doDownload(url: string, fileName: string) {
+  const a = document.createElement('a')
+  a.download = fileName
+  a.href = url
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+}
+
+function downloadCanvasQRCode() {
+  if (qrcodeRef.value) {
+    const url = qrcodeRef.value.toDataURL()
+    doDownload(url, 'QRCode.png')
+  }
+}
+
+function downloadSvgQRCode() {
+  const svg = qrcodeRef.value.$el?.querySelector<SVGElement>('svg')
+  const svgData = new XMLSerializer().serializeToString(svg!)
+  const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+
+  doDownload(url, 'QRCode.svg')
+}
+</script>
+
+<template>
+  <a-space vertical>
+    <a-segmented v-model:value="renderType" :options="['canvas', 'svg']" />
+    <div>
+      <a-qrcode ref="qrcode" :type="renderType" value="https://ant.design" bg-color="rgba(255,255,255,0.5)" style="margin-bottom: 16px;" icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
+      <a-button type="primary" @click="renderType === 'canvas' ? downloadCanvasQRCode() : downloadSvgQRCode()">
+        download
+      </a-button>
+    </div>
+  </a-space>
+</template>
+```
@@ -0,0 +1,21 @@
+# Error Level
+
+## Description (en-US)
+
+set Error Level.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { QRCodeProps } from 'antdv-next'
+import { ref } from 'vue'
+
+const level = ref<QRCodeProps['errorLevel']>('M')
+</script>
+
+<template>
+  <a-qrcode style="margin-bottom: 16px;" :error-level="level" value="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
+  <a-segmented v-model:value="level" :options="['L', 'M', 'Q', 'H']" />
+</template>
+```
@@ -0,0 +1,17 @@
+# With Icon
+
+## Description (en-US)
+
+QRCode with Icon.
+
+## Source
+
+```vue
+<template>
+  <a-qrcode
+    error-level="H"
+    value="'https://www.antdv-next.com"
+    icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+  />
+</template>
+```
@@ -0,0 +1,21 @@
+# other status
+
+## Description (en-US)
+
+The `status` can be controlled by the value status, four values of `active`, `expired`, `loading`, `scanned` are provided.
+
+## Source
+
+```vue
+<script setup lang="ts">
+const value = 'https://www.antdv-next.com'
+</script>
+
+<template>
+  <a-flex gap="middle" wrap>
+    <a-qrcode :value="value" status="loading" />
+    <a-qrcode :value="value" status="expired" @refresh="() => console.log('refresh')" />
+    <a-qrcode :value="value" status="scanned" />
+  </a-flex>
+</template>
+```
@@ -0,0 +1,16 @@
+# Custom Render Type
+
+## Description (en-US)
+
+Customize the rendering results by `type`, provide options `canvas` and `svg`.
+
+## Source
+
+```vue
+<template>
+  <a-space>
+    <a-qrcode type="canvas" value="https://www.antdv-next.com" />
+    <a-qrcode type="svg" value="https://www.antdv-next.com" />
+  </a-space>
+</template>
+```
@@ -0,0 +1,75 @@
+---
+title: QRCode
+description: Components that can convert text into QR codes, and support custom color and logo.
+---
+
+## When To Use
+
+Used when the text needs to be converted into a QR Code.
+
+## Examples
+
+<!-- prettier-ignore -->
+| base | demo/base.md |
+| With Icon | demo/icon.md |
+| other status | demo/status.md |
+| custom status render | demo/customStatusRender.md |
+| Custom Render Type | demo/type.md |
+| Custom Size | demo/customSize.md |
+| Custom Color | demo/customColor.md |
+| Download QRCode | demo/download.md |
+| Error Level | demo/errorLevel.md |
+| Advanced Usage | demo/Popover.md |
+<!-- | Custom semantic dom styling | demo/style-class.md | -->
+
+## API
+
+### Props
+
+Common props ref：[Common props](../../docs/vue/common-props.md)
+
+| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
+| --- | --- | --- | --- | --- | --- |
+| value | scanned text | string \| string[] | - | - | × |
+| type | render type | `canvas` \| `svg` | `canvas` | - | × |
+| icon | include image url (only image link are supported) | string | - | - | × |
+| size | QRCode size | number | 160 | - | × |
+| iconSize | include image size | number \| &#123; width: number; height: number &#125; | 40 | - | × |
+| color | QRCode Color | string | `#000` | - | × |
+| bgColor | QRCode Background Color | string | `transparent` | - | × |
+| marginSize | Quiet zone size (in modules). `0` means no margin | number | `0` | - | × |
+| bordered | Whether has border style | boolean | `true` | - | × |
+| errorLevel | Error Code Level | `'L'` \| `'M'` \| `'Q'` \| `'H'` | `'M'` | - | × |
+| boostLevel | If enabled, the Error Correction Level of the result may be higher than the specified Error Correction Level | boolean | true | - | × |
+| status | QRCode status | `'active'` \| `'expired'` \| `'loading'` \| `'scanned'` | `'active'` | - | × |
+| statusRender | custom status render | (info: StatusRenderInfo) =&gt; VueNode | - | - | × |
+
+### Events
+
+| Event | Description | Type | Version |
+| --- | --- | --- | --- |
+| refresh | Refresh the QR code | () =&gt; void | - |
+
+### Slots
+
+| Slot | Description | Type | Version |
+| --- | --- | --- | --- |
+| statusRender | custom status render | (info: StatusRenderInfo) =&gt; any | - |
+
+## Semantic DOM
+
+| _semantic | demo/_semantic.md |
+
+## FAQ
+
+### About QRCode ErrorLevel 
+The ErrorLevel means that the QR code can be scanned normally after being blocked, and the maximum area that can be blocked is the error correction rate.
+
+Generally, the QR code is divided into 4 error correction levels: Level `L` can correct about `7%` errors, Level `M` can correct about `15%` errors, Level `Q` can correct about `25%` errors, and Level `H` can correct about `30%` errors. When the content encoding of the QR code carries less information, in other words, when the value link is short, set different error correction levels, and the generated image will not change.
+
+> For more information, see the: [https://www.qrcode.com/en/about/error_correction](https://www.qrcode.com/en/about/error_correction.html)
+
+### ⚠️⚠️⚠️ Cannot scan the QR code? 
+If the QR code cannot be scanned for identification, it may be because the link address is too long, which leads to too dense pixels.
+
+You can configure the QR code to be larger through size, or shorten the link through short link services.