From 40b2854875f492a0f2ed3e67e765846806253ae5 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期三, 05 三月 2025 22:55:54 +0800
Subject: [PATCH] 高级页面优化
---
src/views/demo/comp/qrcode/index.vue | 112 ++++++++++++++++++++++++-------------------------------
1 files changed, 49 insertions(+), 63 deletions(-)
diff --git a/src/views/demo/comp/qrcode/index.vue b/src/views/demo/comp/qrcode/index.vue
index a82ef09..bc5948a 100644
--- a/src/views/demo/comp/qrcode/index.vue
+++ b/src/views/demo/comp/qrcode/index.vue
@@ -1,19 +1,15 @@
<template>
<PageWrapper title="浜岀淮鐮佺粍浠朵娇鐢ㄧず渚�">
<div class="flex flex-wrap">
- <CollapseContainer
- title="鍩虹绀轰緥"
- :canExpan="true"
- class="text-center mb-6 qrcode-demo-item"
- >
+ <CollapseContainer title="鍩虹绀轰緥" :canExpand="true" class="text-center mb-6 w-1/5 mr-6">
<QrCode :value="qrCodeUrl" />
</CollapseContainer>
- <CollapseContainer title="娓叉煋鎴恑mg鏍囩绀轰緥" class="text-center mb-6 qrcode-demo-item">
+ <CollapseContainer title="娓叉煋鎴恑mg鏍囩绀轰緥" class="text-center mb-6 w-1/5 mr-6">
<QrCode :value="qrCodeUrl" tag="img" />
</CollapseContainer>
- <CollapseContainer title="閰嶇疆鏍峰紡绀轰緥" class="text-center mb-6 qrcode-demo-item">
+ <CollapseContainer title="閰嶇疆鏍峰紡绀轰緥" class="text-center mb-6 w-1/5 mr-6">
<QrCode
:value="qrCodeUrl"
:options="{
@@ -22,11 +18,11 @@
/>
</CollapseContainer>
- <CollapseContainer title="鏈湴logo绀轰緥" class="text-center mb-6 qrcode-demo-item">
+ <CollapseContainer title="鏈湴logo绀轰緥" class="text-center mb-6 w-1/5 mr-6">
<QrCode :value="qrCodeUrl" :logo="LogoImg" />
</CollapseContainer>
- <CollapseContainer title="鍦ㄧ嚎logo绀轰緥" class="text-center mb-6 qrcode-demo-item">
+ <CollapseContainer title="鍦ㄧ嚎logo绀轰緥" class="text-center mb-6 w-1/5 mr-6">
<QrCode
:value="qrCodeUrl"
logo="https://vebn.oss-cn-beijing.aliyuncs.com/vben/logo.png"
@@ -36,7 +32,7 @@
/>
</CollapseContainer>
- <CollapseContainer title="logo閰嶇疆绀轰緥" class="text-center mb-6 qrcode-demo-item">
+ <CollapseContainer title="logo閰嶇疆绀轰緥" class="text-center mb-6 w-1/5 mr-6">
<QrCode
:value="qrCodeUrl"
:logo="{
@@ -49,17 +45,17 @@
/>
</CollapseContainer>
- <CollapseContainer title="涓嬭浇绀轰緥" class="text-center qrcode-demo-item">
+ <CollapseContainer title="涓嬭浇绀轰緥" class="text-center mb-6 w-1/5 mr-6">
<QrCode :value="qrCodeUrl" ref="qrRef" :logo="LogoImg" />
<a-button class="mb-2" type="primary" @click="download"> 涓嬭浇 </a-button>
<div class="msg">(鍦ㄧ嚎logo浼氬鑷村浘鐗囪法鍩燂紝闇�瑕佷笅杞藉浘鐗囬渶瑕佽嚜琛岃В鍐宠法鍩熼棶棰�)</div>
</CollapseContainer>
- <CollapseContainer title="閰嶇疆澶у皬绀轰緥" class="text-center qrcode-demo-item">
+ <CollapseContainer title="閰嶇疆澶у皬绀轰緥" class="text-center w-1/5 mr-6">
<QrCode :value="qrCodeUrl" :width="300" />
</CollapseContainer>
- <CollapseContainer title="鎵╁睍缁樺埗绀轰緥" class="text-center qrcode-demo-item">
+ <CollapseContainer title="鎵╁睍缁樺埗绀轰緥" class="text-center w-1/5 mr-6">
<QrCode
:value="qrCodeUrl"
:width="200"
@@ -71,58 +67,48 @@
<a-button class="mb-2" type="primary" @click="downloadDiy"> 涓嬭浇 </a-button>
<div class="msg">瑕佽繘琛屾墿灞曠粯鍒跺垯涓嶈兘灏唗ag璁句负img</div>
</CollapseContainer>
+
+ <CollapseContainer title="Antdv QRCode" class="text-center w-1/5 mr-6">
+ <QRCode :value="qrCodeUrl" :size="200" />
+ </CollapseContainer>
+
+ <CollapseContainer title="Antdv QRCode 甯con" class="text-center w-1/5 mr-6">
+ <QRCode :value="qrCodeUrl" :size="200" :icon="LogoImg" />
+ </CollapseContainer>
</div>
</PageWrapper>
</template>
-<script lang="ts">
- import { defineComponent, ref, unref } from 'vue';
- import { QrCode, QrCodeActionType } from '/@/components/Qrcode/index';
- import LogoImg from '/@/assets/images/logo.png';
- import { CollapseContainer } from '/@/components/Container/index';
- import { PageWrapper } from '/@/components/Page';
+<script lang="ts" setup>
+ import LogoImg from '@/assets/images/logo.png';
+ import { CollapseContainer } from '@/components/Container';
+ import { PageWrapper } from '@/components/Page';
+ import { QrCode, QrCodeActionType } from '@/components/Qrcode';
+ import { type Nullable } from '@vben/types';
+ import { QRCode } from 'ant-design-vue';
+ import { ref, unref } from 'vue';
- const qrCodeUrl = 'http://47.115.28.255:8002/WMS_PDA.apk';
- export default defineComponent({
- components: { CollapseContainer, QrCode, PageWrapper },
- setup() {
- const qrRef = ref<Nullable<QrCodeActionType>>(null);
- const qrDiyRef = ref<Nullable<QrCodeActionType>>(null);
- function download() {
- const qrEl = unref(qrRef);
- if (!qrEl) return;
- qrEl.download('鏂囦欢鍚�');
- }
- function downloadDiy() {
- const qrEl = unref(qrDiyRef);
- if (!qrEl) return;
- qrEl.download('Qrcode');
- }
-
- function onQrcodeDone({ ctx }: any) {
- if (ctx instanceof CanvasRenderingContext2D) {
- // 棰濆缁樺埗
- ctx.fillStyle = 'black';
- ctx.font = '16px "寰蒋闆呴粦"';
- ctx.textBaseline = 'bottom';
- ctx.textAlign = 'center';
- ctx.fillText('浣犲竻浣犲厛鎵�', 100, 195, 200);
- }
- }
- return {
- onQrcodeDone,
- qrCodeUrl,
- LogoImg,
- download,
- downloadDiy,
- qrRef,
- qrDiyRef,
- };
- },
- });
-</script>
-<style scoped>
- .qrcode-demo-item {
- width: 30%;
- margin-right: 1%;
+ const qrCodeUrl = 'https://www.vvbin.cn';
+ const qrRef = ref<Nullable<QrCodeActionType>>(null);
+ const qrDiyRef = ref<Nullable<QrCodeActionType>>(null);
+ function download() {
+ const qrEl = unref(qrRef);
+ if (!qrEl) return;
+ qrEl.download('鏂囦欢鍚�');
}
-</style>
+ function downloadDiy() {
+ const qrEl = unref(qrDiyRef);
+ if (!qrEl) return;
+ qrEl.download('Qrcode');
+ }
+
+ function onQrcodeDone({ ctx }: any) {
+ if (ctx instanceof CanvasRenderingContext2D) {
+ // 棰濆缁樺埗
+ ctx.fillStyle = 'black';
+ ctx.font = '16px "寰蒋闆呴粦"';
+ ctx.textBaseline = 'bottom';
+ ctx.textAlign = 'center';
+ ctx.fillText('浣犲竻浣犲厛鎵�', 100, 195, 200);
+ }
+ }
+</script>
--
Gitblit v1.9.3