fix: use antdv qrcode
This commit is contained in:
@@ -7,8 +7,7 @@ import { useVbenModal } from '@vben/common-ui';
|
|||||||
import { IconifyIcon } from '@vben/icons';
|
import { IconifyIcon } from '@vben/icons';
|
||||||
import { cloneDeep, isEmpty, isString } from '@vben/utils';
|
import { cloneDeep, isEmpty, isString } from '@vben/utils';
|
||||||
|
|
||||||
import { useQRCode } from '@vueuse/integrations/useQRCode';
|
import { Button, Card, QRCode, Tag, Tooltip } from 'ant-design-vue';
|
||||||
import { Button, Card, Image, Tag, Tooltip } from 'ant-design-vue';
|
|
||||||
import draggable from 'vuedraggable';
|
import draggable from 'vuedraggable';
|
||||||
|
|
||||||
import statusBarImg from '#/assets/imgs/diy/statusBar.png';
|
import statusBarImg from '#/assets/imgs/diy/statusBar.png';
|
||||||
@@ -39,11 +38,6 @@ const props = defineProps({
|
|||||||
|
|
||||||
const emits = defineEmits(['reset', 'save', 'update:modelValue']); // 工具栏操作
|
const emits = defineEmits(['reset', 'save', 'update:modelValue']); // 工具栏操作
|
||||||
|
|
||||||
const qrcode = useQRCode(props.previewUrl, {
|
|
||||||
errorCorrectionLevel: 'H',
|
|
||||||
margin: 4,
|
|
||||||
}); // 预览二维码
|
|
||||||
|
|
||||||
const componentLibrary = ref(); // 左侧组件库
|
const componentLibrary = ref(); // 左侧组件库
|
||||||
const pageConfigComponent = ref<DiyComponent<any>>(
|
const pageConfigComponent = ref<DiyComponent<any>>(
|
||||||
cloneDeep(PAGE_CONFIG_COMPONENT),
|
cloneDeep(PAGE_CONFIG_COMPONENT),
|
||||||
@@ -397,7 +391,8 @@ onMounted(() => {
|
|||||||
@copy="handleCopyComponent(index)"
|
@copy="handleCopyComponent(index)"
|
||||||
@delete="handleDeleteComponent(index)"
|
@delete="handleDeleteComponent(index)"
|
||||||
@move="
|
@move="
|
||||||
(direction: number) => handleMoveComponent(index, direction)
|
(direction: number) =>
|
||||||
|
handleMoveComponent(index, direction)
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
@@ -457,7 +452,10 @@ onMounted(() => {
|
|||||||
v-if="selectedComponent?.property"
|
v-if="selectedComponent?.property"
|
||||||
class="editor-right w-[350px] shrink-0 overflow-hidden shadow-[-8px_0_8px_-8px_rgb(0_0_0/0.12)]"
|
class="editor-right w-[350px] shrink-0 overflow-hidden shadow-[-8px_0_8px_-8px_rgb(0_0_0/0.12)]"
|
||||||
>
|
>
|
||||||
<Card class="h-full" :body-style="{ padding: 0, height: 'calc(100% - 57px)' }">
|
<Card
|
||||||
|
class="h-full"
|
||||||
|
:body-style="{ padding: 0, height: 'calc(100% - 57px)' }"
|
||||||
|
>
|
||||||
<!-- 组件名称 -->
|
<!-- 组件名称 -->
|
||||||
<template #title>
|
<template #title>
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
@@ -478,7 +476,7 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 预览弹框 -->
|
<!-- 预览弹框 -->
|
||||||
<PreviewModal title="预览" class="w-700px">
|
<PreviewModal title="预览" class="w-[700px]">
|
||||||
<div class="flex justify-around">
|
<div class="flex justify-around">
|
||||||
<iframe
|
<iframe
|
||||||
:src="previewUrl"
|
:src="previewUrl"
|
||||||
@@ -486,7 +484,7 @@ onMounted(() => {
|
|||||||
></iframe>
|
></iframe>
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div class="text-base">手机扫码预览</div>
|
<div class="text-base">手机扫码预览</div>
|
||||||
<Image :src="qrcode" alt="qrcode" />
|
<QRCode :value="previewUrl" error-level="H" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</PreviewModal>
|
</PreviewModal>
|
||||||
|
|||||||
Reference in New Issue
Block a user