fix:【antd】【mall】diy-editor 的 carousel 的 radio 不正确

This commit is contained in:
YunaiV
2025-11-11 22:51:35 +08:00
parent 7bd3a31a09
commit 4a03825313
2 changed files with 21 additions and 9 deletions

View File

@@ -22,10 +22,13 @@ const handleIndexChange = (index: number) => {
<template> <template>
<!-- 无图片 --> <!-- 无图片 -->
<div <div
class="bg-card flex h-64 items-center justify-center" class="flex items-center justify-center bg-gray-300"
:style="{
height: property.items.length === 0 ? '250px' : `${property.height}px`,
}"
v-if="property.items.length === 0" v-if="property.items.length === 0"
> >
<IconifyIcon icon="tdesign:image" class="size-6 text-gray-800" /> <IconifyIcon icon="tdesign:image" class="text-[120px] text-gray-800" />
</div> </div>
<div v-else class="relative"> <div v-else class="relative">
<Carousel <Carousel
@@ -33,7 +36,7 @@ const handleIndexChange = (index: number) => {
:autoplay-speed="property.interval * 1000" :autoplay-speed="property.interval * 1000"
:dots="property.indicator !== 'number'" :dots="property.indicator !== 'number'"
@change="handleIndexChange" @change="handleIndexChange"
class="h-44" :style="{ height: `${property.height}px` }"
> >
<div v-for="(item, index) in property.items" :key="index"> <div v-for="(item, index) in property.items" :key="index">
<Image <Image
@@ -45,7 +48,7 @@ const handleIndexChange = (index: number) => {
</Carousel> </Carousel>
<div <div
v-if="property.indicator === 'number'" v-if="property.indicator === 'number'"
class="absolute bottom-2.5 right-2.5 rounded-xl bg-black px-2 py-1 text-xs text-white opacity-40" class="absolute bottom-[10px] right-[10px] rounded-xl bg-black px-[8px] py-[2px] text-[10px] text-white opacity-40"
> >
{{ currentIndex }} / {{ property.items.length }} {{ currentIndex }} / {{ property.items.length }}
</div> </div>

View File

@@ -7,6 +7,7 @@ import { useVModel } from '@vueuse/core';
import { import {
Form, Form,
FormItem, FormItem,
InputNumber,
Radio, Radio,
RadioButton, RadioButton,
RadioGroup, RadioGroup,
@@ -37,7 +38,7 @@ const formData = useVModel(props, 'modelValue', emit);
<p class="text-base font-bold">样式设置</p> <p class="text-base font-bold">样式设置</p>
<div class="flex flex-col gap-2 rounded-md p-4 shadow-lg"> <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
<FormItem label="样式" prop="type"> <FormItem label="样式" prop="type">
<RadioGroup v-model="formData.type"> <RadioGroup v-model:value="formData.type">
<Tooltip class="item" content="默认" placement="bottom"> <Tooltip class="item" content="默认" placement="bottom">
<RadioButton value="default"> <RadioButton value="default">
<IconifyIcon icon="system-uicons:carousel" class="size-6" /> <IconifyIcon icon="system-uicons:carousel" class="size-6" />
@@ -50,18 +51,26 @@ const formData = useVModel(props, 'modelValue', emit);
</Tooltip> </Tooltip>
</RadioGroup> </RadioGroup>
</FormItem> </FormItem>
<FormItem label="高度" prop="height">
<InputNumber
v-model:value="formData.height"
class="mr-[10px] !w-1/2"
controls-position="right"
/>
px
</FormItem>
<FormItem label="指示器" prop="indicator"> <FormItem label="指示器" prop="indicator">
<RadioGroup v-model="formData.indicator"> <RadioGroup v-model:value="formData.indicator">
<Radio value="dot">小圆点</Radio> <Radio value="dot">小圆点</Radio>
<Radio value="number">数字</Radio> <Radio value="number">数字</Radio>
</RadioGroup> </RadioGroup>
</FormItem> </FormItem>
<FormItem label="是否轮播" prop="autoplay"> <FormItem label="是否轮播" prop="autoplay">
<Switch v-model="formData.autoplay" /> <Switch v-model:checked="formData.autoplay" />
</FormItem> </FormItem>
<FormItem label="播放间隔" prop="interval" v-if="formData.autoplay"> <FormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
<Slider <Slider
v-model="formData.interval" v-model:value="formData.interval"
:max="10" :max="10"
:min="0.5" :min="0.5"
:step="0.5" :step="0.5"
@@ -77,7 +86,7 @@ const formData = useVModel(props, 'modelValue', emit);
<Draggable v-model="formData.items" :empty-item="{ type: 'img' }"> <Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
<template #default="{ element }"> <template #default="{ element }">
<FormItem label="类型" prop="type" class="mb-2" label-width="40px"> <FormItem label="类型" prop="type" class="mb-2" label-width="40px">
<RadioGroup v-model="element.type"> <RadioGroup v-model:value="element.type">
<Radio value="img">图片</Radio> <Radio value="img">图片</Radio>
<Radio value="video">视频</Radio> <Radio value="video">视频</Radio>
</RadioGroup> </RadioGroup>