fix:【antd】【mall】diy-editor 的 carousel 的 radio 不正确
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user