130 lines
4.2 KiB
Vue
130 lines
4.2 KiB
Vue
<script setup lang="ts">
|
||
import { ref, unref } from "vue";
|
||
import { message } from "@/utils/message";
|
||
import ReQrcode from "@/components/ReQrcode";
|
||
|
||
defineOptions({
|
||
name: "QrCode"
|
||
});
|
||
|
||
const qrcodeText = "vue-pure-admin";
|
||
|
||
const asyncTitle = ref("");
|
||
setTimeout(() => {
|
||
asyncTitle.value = unref(qrcodeText);
|
||
}, 3000);
|
||
const codeClick = () => {
|
||
message("点击事件", { type: "info" });
|
||
};
|
||
const disabledClick = () => {
|
||
message("失效", { type: "info" });
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<div class="font-medium">
|
||
二维码（基于
|
||
<el-link
|
||
href="https://github.com/soldair/node-qrcode"
|
||
target="_blank"
|
||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||
>
|
||
qrcode
|
||
</el-link>
|
||
生成）
|
||
</div>
|
||
<el-link
|
||
class="mt-2"
|
||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/qrcode.vue"
|
||
target="_blank"
|
||
>
|
||
代码位置 src/views/able/qrcode.vue
|
||
</el-link>
|
||
</template>
|
||
<el-row :gutter="20" justify="space-between">
|
||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||
<div class="font-bold">基础用法</div>
|
||
<ReQrcode :text="qrcodeText" />
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||
<div class="font-bold">img标签</div>
|
||
<ReQrcode :text="qrcodeText" tag="img" />
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||
<div class="font-bold">样式配置</div>
|
||
<ReQrcode
|
||
:text="qrcodeText"
|
||
:options="{
|
||
color: {
|
||
dark: '#55D187',
|
||
light: '#2d8cf0'
|
||
}
|
||
}"
|
||
/>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||
<div class="font-bold">点击事件</div>
|
||
<ReQrcode :text="qrcodeText" @click="codeClick" />
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||
<div class="font-bold">异步内容</div>
|
||
<ReQrcode :text="asyncTitle" />
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||
<div class="font-bold">失效</div>
|
||
<ReQrcode
|
||
:text="qrcodeText"
|
||
disabled
|
||
@disabled-click="disabledClick"
|
||
/>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||
<div class="font-bold">logo配置</div>
|
||
<ReQrcode
|
||
:text="qrcodeText"
|
||
logo="https://avatars.githubusercontent.com/u/44761321?v=4"
|
||
/>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||
<div class="font-bold">logo样式</div>
|
||
<ReQrcode
|
||
:text="qrcodeText"
|
||
:logo="{
|
||
src: 'https://avatars.githubusercontent.com/u/44761321?v=4',
|
||
logoSize: 0.2,
|
||
borderSize: 0.05,
|
||
borderRadius: 50,
|
||
bgColor: 'blue'
|
||
}"
|
||
/>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
|
||
<el-card shadow="hover" class="mb-[10px] text-center">
|
||
<div class="font-bold">大小配置</div>
|
||
<ReQrcode :text="qrcodeText" :width="100" />
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</div>
|
||
</template>
|