feat: add qrcode (#6315)

* feat: add qrcode

* fix: qrcode bug

* fix: qrcode value required

* refactor: props  deconstruct

Author: selicens

components/components.ts

@@ -250,3 +250,6 @@ export type { WatermarkProps } from './watermark';
 
 export type { SegmentedProps } from './segmented';
 export { default as Segmented } from './segmented';
+
+export type { QRCodeProps } from './qrcode';
+export { default as QRCode } from './qrcode';

components/locale/en_US.ts

@@ -131,6 +131,10 @@ const localeValues: Locale = {
   Image: {
     preview: 'Preview',
   },
+  QRCode: {
+    expired: 'QR code expired',
+    refresh: 'Refresh',
+  },
 };
 
 export default localeValues;

components/locale/index.tsx

@@ -42,6 +42,10 @@ export interface Locale {
     copied?: any;
     expand?: any;
   };
+  QRCode: {
+    expired?: string;
+    refresh?: string;
+  };
 }
 
 export interface LocaleProviderProps {

components/locale/zh_CN.ts

@@ -130,6 +130,10 @@ const localeValues: Locale = {
   Image: {
     preview: '预览',
   },
+  QRCode: {
+    expired: '二维码已过期',
+    refresh: '点击刷新',
+  },
 };
 
 export default localeValues;

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-qrcode 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-qrcode value="http://www.antv.com" color="#73d13d" /></div>
+    <div><a-qrcode 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-qrcode
+    :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-qrcode 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-qrcode 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>