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