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/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>

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-qrcode
+    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-qrcode 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-qrcode value="http://www.antv.com" status="loading" /></div>
+    <div><a-qrcode 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>