From fa3ac93010bea3805438ee3ab0a182bfbf7423da Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期一, 27 五月 2024 16:19:31 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/demo/comp/qrcode/index.vue | 117 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 117 insertions(+), 0 deletions(-)
diff --git a/src/views/demo/comp/qrcode/index.vue b/src/views/demo/comp/qrcode/index.vue
new file mode 100644
index 0000000..a96fc18
--- /dev/null
+++ b/src/views/demo/comp/qrcode/index.vue
@@ -0,0 +1,117 @@
+<template>
+ <PageWrapper title="浜岀淮鐮佺粍浠朵娇鐢ㄧず渚�">
+ <div class="flex flex-wrap">
+ <CollapseContainer title="鍩虹绀轰緥" :canExpan="true" class="text-center mb-6 qrcode-demo-item">
+ <QrCode :value="qrCodeUrl" />
+ </CollapseContainer>
+
+ <CollapseContainer title="娓叉煋鎴恑mg鏍囩绀轰緥" class="text-center mb-6 qrcode-demo-item">
+ <QrCode :value="qrCodeUrl" tag="img" />
+ </CollapseContainer>
+
+ <CollapseContainer title="閰嶇疆鏍峰紡绀轰緥" class="text-center mb-6 qrcode-demo-item">
+ <QrCode
+ :value="qrCodeUrl"
+ :options="{
+ color: { dark: '#55D187' },
+ }"
+ />
+ </CollapseContainer>
+
+ <CollapseContainer title="鏈湴logo绀轰緥" class="text-center mb-6 qrcode-demo-item">
+ <QrCode :value="qrCodeUrl" :logo="LogoImg" />
+ </CollapseContainer>
+
+ <CollapseContainer title="鍦ㄧ嚎logo绀轰緥" class="text-center mb-6 qrcode-demo-item">
+ <QrCode
+ :value="qrCodeUrl"
+ logo="http://jeecg.com/images/logo.png"
+ :options="{
+ color: { dark: '#55D187' },
+ }"
+ />
+ </CollapseContainer>
+
+ <CollapseContainer title="logo閰嶇疆绀轰緥" class="text-center mb-6 qrcode-demo-item">
+ <QrCode
+ :value="qrCodeUrl"
+ :logo="{
+ src: 'http://jeecg.com/images/logo.png',
+ logoSize: 0.2,
+ borderSize: 0.05,
+ borderRadius: 50,
+ bgColor: 'blue',
+ }"
+ />
+ </CollapseContainer>
+
+ <CollapseContainer title="涓嬭浇绀轰緥" class="text-center qrcode-demo-item">
+ <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">
+ <QrCode :value="qrCodeUrl" :width="300" />
+ </CollapseContainer>
+
+ <CollapseContainer title="鎵╁睍缁樺埗绀轰緥" class="text-center qrcode-demo-item">
+ <QrCode :value="qrCodeUrl" :width="200" :options="{ margin: 5 }" ref="qrDiyRef" :logo="LogoImg" @done="onQrcodeDone" />
+ <a-button class="mb-2" type="primary" @click="downloadDiy"> 涓嬭浇 </a-button>
+ <div class="msg"> 瑕佽繘琛屾墿灞曠粯鍒跺垯涓嶈兘灏唗ag璁句负img </div>
+ </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/lanpu.png';
+ import { CollapseContainer } from '/@/components/Container/index';
+ import { PageWrapper } from '/@/components/Page';
+
+ const qrCodeUrl = 'https://www.vvbin.cn';
+ 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%;
+ }
+</style>
--
Gitblit v1.9.3