feat: add qrcode

components/components.ts

@@ -248,3 +248,6 @@ export { default as LocaleProvider } from './locale-provider';
 export type { SegmentedProps } from './segmented';
 
 export { default as Segmented } from './segmented';
+
+export type { QRCodeProps } from './qrcode';
+export { default as QRCode } from './qrcode';

components/qrcode/__tests__/demo.test.js

@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('qrcode');

components/qrcode/demo/base.vue

@@ -0,0 +1,29 @@
+<docs>
+---
+order: 0
+title:
+  zh-CN: 基本使用
+  en-US: Base
+---
+
+## zh-CN
+
+基本用法。
+
+## en-US
+Basic Usage.
+</docs>
+
+<template>
+  <a-qr-code value="https://www.antdv.com/" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>

components/qrcode/demo/customColor.vue

@@ -0,0 +1,32 @@
+<docs>
+---
+order: 5
+title:
+  zh-CN: 自定义颜色
+  en-US: Custom Color
+---
+
+## zh-CN
+
+通过设置 `color` 自定义二维码颜色，通过设置 `style` 自定义背景颜色。
+
+## en-US
+Custom Color.
+</docs>
+
+<template>
+  <a-space>
+    <div><a-qr-code value="http://www.antv.com" color="#73d13d" /></div>
+    <div><a-qr-code value="http://www.antv.com" color="#1677ff" /></div>
+  </a-space>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>

components/qrcode/demo/customSize.vue

@@ -0,0 +1,56 @@
+<docs>
+---
+order: 4
+title:
+  zh-CN: 自定义尺寸
+  en-US: Custom Size
+---
+
+## zh-CN
+
+自定义尺寸
+
+## en-US
+Custom Size.
+</docs>
+
+<template>
+  <a-button-group>
+    <a-button @click="decline">
+      <template #icon><MinusOutlined /></template>
+      samll
+    </a-button>
+    <a-button @click="increase">
+      <template #icon><PlusOutlined /></template>
+      large
+    </a-button>
+  </a-button-group>
+  <br />
+  <br />
+  <a-qr-code
+    :size="size"
+    :icon-size="size / 4"
+    error-level="H"
+    value="https://www.antv.com"
+    icon="https://www.antdv.com/assets/logo.1ef800a8.svg"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
+
+const size = ref(160);
+const decline = () => {
+  size.value = size.value - 10;
+  if (size.value < 48) {
+    size.value = 48;
+  }
+};
+const increase = () => {
+  size.value = size.value + 10;
+  if (size.value > 300) {
+    size.value = 300;
+  }
+};
+</script>

components/qrcode/demo/download.vue

@@ -0,0 +1,45 @@
+<docs>
+---
+order: 6
+title:
+  zh-CN: 下载二维码
+  en-US: Download QRCode
+---
+
+## zh-CN
+
+下载二维码的简单实现。
+
+## en-US
+A way to download QRCode.
+</docs>
+
+<template>
+  <a-qr-code ref="qrcodeCanvasRef" value="http://www.antv.com" />
+  <br />
+  <br />
+  <a-button type="primary" @click="dowloadChange">Downlaod</a-button>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const qrcodeCanvasRef = ref();
+    const dowloadChange = async () => {
+      const url = await qrcodeCanvasRef.value.toDataUrl();
+      const a = document.createElement('a');
+      a.download = 'QRCode.png';
+      a.href = url;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    };
+    return {
+      dowloadChange,
+      qrcodeCanvasRef,
+    };
+  },
+});
+</script>

components/qrcode/demo/errorLevel.vue

@@ -0,0 +1,37 @@
+<docs>
+---
+order: 7
+title:
+  zh-CN: 纠错比例
+  en-US: Error Level
+---
+
+## zh-CN
+
+通过设置 errorLevel 调整不同的容错等级。
+
+## en-US
+set Error Level.
+</docs>
+
+<template>
+  <a-qr-code v-model:error-level="level" value="http://www.antv.com" />
+  <br />
+  <br />
+  <a-segmented v-model:value="level" :options="segmentedData" />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, reactive } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const segmentedData = reactive(['L', 'M', 'Q', 'H']);
+    const level = ref(segmentedData[0]);
+    return {
+      segmentedData,
+      level,
+    };
+  },
+});
+</script>

components/qrcode/demo/icon.vue

@@ -0,0 +1,33 @@
+<docs>
+---
+order: 1
+title:
+  zh-CN: 带 Icon 的例子
+  en-US: With Icon
+---
+
+## zh-CN
+
+带 Icon 的二维码。
+
+## en-US
+QRCode with Icon.
+</docs>
+
+<template>
+  <a-qr-code
+    error-level="H"
+    value="https://www.antv.com"
+    icon="https://www.antdv.com/assets/logo.1ef800a8.svg"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>

components/qrcode/demo/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <demo-sort>
+    <Base />
+    <Icon />
+    <Status />
+    <CustomSize />
+    <CustomColor />
+    <Download />
+    <ErrorLevel />
+    <Popover />
+  </demo-sort>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import CN from '../index.zh-CN.md';
+import US from '../index.en-US.md';
+import Base from './base.vue';
+import Icon from './icon.vue';
+import Status from './status.vue';
+import CustomSize from './customSize.vue';
+import CustomColor from './customColor.vue';
+import Download from './download.vue';
+import ErrorLevel from './errorLevel.vue';
+import Popover from './popover.vue';
+
+export default defineComponent({
+  components: { Base, Icon, Status, CustomSize, CustomColor, Download, ErrorLevel, Popover },
+  category: 'Components',
+  subtitle: '二维码',
+  type: 'Data Display',
+  title: 'QRCode',
+  CN,
+  US,
+});
+</script>

components/qrcode/demo/popover.vue

@@ -0,0 +1,34 @@
+<docs>
+---
+order: 8
+title:
+  zh-CN: 高级用法
+  en-US: Advanced Usage
+---
+
+## zh-CN
+
+带气泡卡片的例子。
+
+## en-US
+With Popover.
+</docs>
+
+<template>
+  <a-popover>
+    <template #content>
+      <a-qr-code value="http://www.antv.com" />
+    </template>
+    <img width="100" height="100" src="https://aliyuncdn.antdv.com/logo.png" />
+  </a-popover>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>

components/qrcode/demo/status.vue

@@ -0,0 +1,35 @@
+<docs>
+---
+order: 3
+title:
+  zh-CN: 不同的状态
+  en-US: other status
+---
+
+## zh-CN
+
+可以通过 status 的值控制二维码的状态。
+
+## en-US
+The status can be controlled by the value `status`.
+</docs>
+
+<template>
+  <a-space>
+    <div><a-qr-code value="http://www.antv.com" status="loading" /></div>
+    <div><a-qr-code value="http://www.antv.com" status="expired" @refresh="refreshChange" /></div>
+  </a-space>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const refreshChange = () => alert('updated');
+    return {
+      refreshChange,
+    };
+  },
+});
+</script>

components/qrcode/index.en-US.md

@@ -0,0 +1,34 @@
+---
+category: Components
+title: QRCode
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original
+coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M4PBTZ_n9OgAAAAAAAAAAAAADrJ8AQ/original
+---
+
+## When To Use
+
+Used when the link needs to be converted into a QR Code.
+
+## API
+
+| Property | Description | Type | Default |
+| :-- | :-- | :-- | :-- |
+| value | scanned link | string | - |
+| icon | include image url (only image link are supported) | string | - |
+| size | QRCode size | number | 128 |
+| iconSize | include image size | number | 32 |
+| color | QRCode Color | string | `#000` |
+| bordered | Whether has border style | boolean | `true` |
+| errorLevel | Error Code Level | `'L'` \| `'M'` \| `'Q'` \| `'H'` | `'M'` |
+| status | QRCode status | `active` \| `expired` \| `loading ` | `active` |
+| onRefresh | callback | `() => void` | - |
+
+## 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)