CRM系统前端
查看 | 历史 | 提交 | 提交对比
Netfan
2021-05-11 2b76b88481dab2c580e684987a80028710d4698d
提交 | 用户 | age
2f6253 1 <template>
31ff05 2   <PageWrapper title="二维码组件使用示例">
V 3     <div class="flex flex-wrap">
4       <CollapseContainer
5         title="基础示例"
6         :canExpan="true"
7         class="text-center mb-6 qrcode-demo-item"
8       >
9         <QrCode :value="qrCodeUrl" />
10       </CollapseContainer>
2f6253 11
31ff05 12       <CollapseContainer title="渲染成img标签示例" class="text-center mb-6 qrcode-demo-item">
V 13         <QrCode :value="qrCodeUrl" tag="img" />
14       </CollapseContainer>
2f6253 15
31ff05 16       <CollapseContainer title="配置样式示例" class="text-center mb-6 qrcode-demo-item">
V 17         <QrCode
18           :value="qrCodeUrl"
19           :options="{
20             color: { dark: '#55D187' },
21           }"
22         />
23       </CollapseContainer>
2f6253 24
31ff05 25       <CollapseContainer title="本地logo示例" class="text-center mb-6 qrcode-demo-item">
V 26         <QrCode :value="qrCodeUrl" :logo="LogoImg" />
27       </CollapseContainer>
2f6253 28
31ff05 29       <CollapseContainer title="在线logo示例" class="text-center mb-6 qrcode-demo-item">
V 30         <QrCode
31           :value="qrCodeUrl"
32           logo="https://vebn.oss-cn-beijing.aliyuncs.com/vben/logo.png"
33           :options="{
34             color: { dark: '#55D187' },
35           }"
36         />
37       </CollapseContainer>
2f6253 38
31ff05 39       <CollapseContainer title="logo配置示例" class="text-center mb-6 qrcode-demo-item">
V 40         <QrCode
41           :value="qrCodeUrl"
42           :logo="{
43             src: 'https://vebn.oss-cn-beijing.aliyuncs.com/vben/logo.png',
44             logoSize: 0.2,
45             borderSize: 0.05,
46             borderRadius: 50,
47             bgColor: 'blue',
48           }"
49         />
50       </CollapseContainer>
2f6253 51
31ff05 52       <CollapseContainer title="下载示例" class="text-center qrcode-demo-item">
V 53         <QrCode :value="qrCodeUrl" ref="qrRef" :logo="LogoImg" />
54         <a-button class="mb-2" type="primary" @click="download"> 下载 </a-button>
9edc28 55         <div class="msg"> (在线logo会导致图片跨域，需要下载图片需要自行解决跨域问题) </div>
31ff05 56       </CollapseContainer>
2f6253 57
31ff05 58       <CollapseContainer title="配置大小示例" class="text-center qrcode-demo-item">
V 59         <QrCode :value="qrCodeUrl" :width="300" />
60       </CollapseContainer>
2b76b8 61
N 62       <CollapseContainer title="扩展绘制示例" class="text-center qrcode-demo-item">
63         <QrCode
64           :value="qrCodeUrl"
65           :width="200"
66           :options="{ margin: 5 }"
67           ref="qrDiyRef"
68           :logo="LogoImg"
69           @done="onQrcodeDone"
70         />
71         <a-button class="mb-2" type="primary" @click="downloadDiy"> 下载 </a-button>
72         <div class="msg"> 要进行扩展绘制则不能将tag设为img </div>
73       </CollapseContainer>
31ff05 74     </div>
V 75   </PageWrapper>
2f6253 76 </template>
陈 77 <script lang="ts">
78   import { defineComponent, ref, unref } from 'vue';
79   import { QrCode, QrCodeActionType } from '/@/components/Qrcode/index';
80   import LogoImg from '/@/assets/images/logo.png';
81   import { CollapseContainer } from '/@/components/Container/index';
31ff05 82   import { PageWrapper } from '/@/components/Page';
V 83
2f6253 84   const qrCodeUrl = 'https://www.vvbin.cn';
陈 85   export default defineComponent({
31ff05 86     components: { CollapseContainer, QrCode, PageWrapper },
2f6253 87     setup() {
陈 88       const qrRef = ref<Nullable<QrCodeActionType>>(null);
2b76b8 89       const qrDiyRef = ref<Nullable<QrCodeActionType>>(null);
2f6253 90       function download() {
陈 91         const qrEl = unref(qrRef);
92         if (!qrEl) return;
93         qrEl.download('文件名');
94       }
2b76b8 95       function downloadDiy() {
N 96         const qrEl = unref(qrDiyRef);
97         if (!qrEl) return;
98         qrEl.download('Qrcode');
99       }
100
101       function onQrcodeDone({ ctx }) {
102         if (ctx instanceof CanvasRenderingContext2D) {
103           // 额外绘制
104           ctx.fillStyle = 'black';
105           ctx.font = '16px "微软雅黑"';
106           ctx.textBaseline = 'bottom';
107           ctx.textAlign = 'center';
108           ctx.fillText('你帅你先扫', 100, 195, 200);
109         }
110       }
2f6253 111       return {
2b76b8 112         onQrcodeDone,
2f6253 113         qrCodeUrl,
陈 114         LogoImg,
115         download,
2b76b8 116         downloadDiy,
2f6253 117         qrRef,
2b76b8 118         qrDiyRef,
2f6253 119       };
陈 120     },
121   });
122 </script>
123 <style scoped>
124   .qrcode-demo-item {
125     width: 30%;
126     margin-right: 1%;
127   }
128 </style>