feat: Add Qrcode component and add qrcode demo

src/views/Components/Qrcode.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { Qrcode } from '@/components/Qrcode'
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { computed, ref, unref } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+import { ElRow, ElCard, ElCol, ElMessage } from 'element-plus'
+// @ts-ignore
+import logoImg from '@/assets/imgs/logo.png'
+
+const appStore = useAppStore()
+
+const { t } = useI18n()
+
+const title = computed(() => appStore.getTitle)
+
+const asyncTitle = ref('')
+
+setTimeout(() => {
+  asyncTitle.value = unref(title)
+}, 3000)
+
+const codeClick = () => {
+  ElMessage.info(t('qrcodeDemo.click'))
+}
+
+const disabledClick = () => {
+  ElMessage.info(t('qrcodeDemo.invalid'))
+}
+</script>
+
+<template>
+  <ContentWrap :title="t('qrcodeDemo.qrcode')" :message="t('qrcodeDemo.qrcodeDes')">
+    <ElRow :gutter="20" justify="space-between">
+      <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+        <ElCard shadow="hover" class="mb-10px text-center">
+          <div class="font-bold mb-10px">{{ t('qrcodeDemo.basicUsage') }}</div>
+          <Qrcode :text="title" />
+        </ElCard>
+      </ElCol>
+      <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+        <ElCard shadow="hover" class="mb-10px text-center">
+          <div class="font-bold mb-10px">{{ t('qrcodeDemo.imgTag') }}</div>
+          <Qrcode :text="title" tag="img" />
+        </ElCard>
+      </ElCol>
+      <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+        <ElCard shadow="hover" class="mb-10px text-center">
+          <div class="font-bold mb-10px">{{ t('qrcodeDemo.style') }}</div>
+          <Qrcode
+            :text="title"
+            :options="{
+              color: {
+                dark: '#55D187',
+                light: '#2d8cf0'
+              }
+            }"
+          />
+        </ElCard>
+      </ElCol>
+      <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+        <ElCard shadow="hover" class="mb-10px text-center">
+          <div class="font-bold mb-10px">{{ t('qrcodeDemo.click') }}</div>
+          <Qrcode :text="title" @click="codeClick" />
+        </ElCard>
+      </ElCol>
+      <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+        <ElCard shadow="hover" class="mb-10px text-center">
+          <div class="font-bold mb-10px">{{ t('qrcodeDemo.asynchronousContent') }}</div>
+          <Qrcode :text="asyncTitle" />
+        </ElCard>
+      </ElCol>
+      <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+        <ElCard shadow="hover" class="mb-10px text-center">
+          <div class="font-bold mb-10px">{{ t('qrcodeDemo.invalid') }}</div>
+          <Qrcode :text="title" disabled @disabled-click="disabledClick" />
+        </ElCard>
+      </ElCol>
+      <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+        <ElCard shadow="hover" class="mb-10px text-center">
+          <div class="font-bold mb-10px">{{ t('qrcodeDemo.logoConfig') }}</div>
+          <Qrcode :text="title" :logo="logoImg" />
+        </ElCard>
+      </ElCol>
+      <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+        <ElCard shadow="hover" class="mb-10px text-center">
+          <div class="font-bold mb-10px">{{ t('qrcodeDemo.logoStyle') }}</div>
+          <Qrcode
+            :text="title"
+            :logo="{
+              src: logoImg,
+              logoSize: 0.2,
+              borderSize: 0.05,
+              borderRadius: 50,
+              bgColor: 'blue'
+            }"
+          />
+        </ElCard>
+      </ElCol>
+      <ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+        <ElCard shadow="hover" class="mb-10px text-center">
+          <div class="font-bold mb-10px">{{ t('qrcodeDemo.size') }}</div>
+          <Qrcode :text="title" :width="250" />
+        </ElCard>
+      </ElCol>
+    </ElRow>
+  </ContentWrap>
+</template>