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>
<!-- 无图片 -->
<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"
>
<IconifyIcon icon="tdesign:image" class="size-6 text-gray-800" />
<IconifyIcon icon="tdesign:image" class="text-[120px] text-gray-800" />
</div>
<div v-else class="relative">
<Carousel
@@ -33,7 +36,7 @@ const handleIndexChange = (index: number) => {
:autoplay-speed="property.interval * 1000"
:dots="property.indicator !== 'number'"
@change="handleIndexChange"
class="h-44"
:style="{ height: `${property.height}px` }"
>
<div v-for="(item, index) in property.items" :key="index">
<Image
@@ -45,7 +48,7 @@ const handleIndexChange = (index: number) => {
</Carousel>
<div
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 }}
</div>

View File

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