feat:【mall】diy editor 的 carousel 统一小写

This commit is contained in:
YunaiV
2025-10-28 15:13:50 +08:00
parent 71fe98723a
commit 0f3f220d4b
3 changed files with 20 additions and 27 deletions

View File

@@ -2,32 +2,23 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
/** 轮播图属性 */
export interface CarouselProperty {
// 类型:默认 | 卡片
type: 'card' | 'default';
// 指示器样式:点 | 数字
indicator: 'dot' | 'number';
// 是否自动播放
autoplay: boolean;
// 播放间隔
interval: number;
// 轮播内容
items: CarouselItemProperty[];
// 组件样式
style: ComponentStyle;
}
// 轮播内容属性
export interface CarouselItemProperty {
// 类型:图片 | 视频
type: 'img' | 'video';
// 图片链接
imgUrl: string;
// 视频链接
videoUrl: string;
// 跳转链接
url: string;
type: 'card' | 'default'; // 类型:默认 | 卡片
indicator: 'dot' | 'number'; // 指示器样式:点 | 数字
autoplay: boolean; // 是否自动播放
interval: number; // 播放间隔
items: CarouselItemProperty[]; // 轮播内容
style: ComponentStyle; // 组件样式
}
// 定义组件
/** 轮播内容属性 */
export interface CarouselItemProperty {
type: 'img' | 'video'; // 类型:图片 | 视频
imgUrl: string; // 图片链接
videoUrl: string; // 视频链接
url: string; // 跳转链接
}
/** 定义组件 */
export const component = {
id: 'Carousel',
name: '轮播图',

View File

@@ -12,7 +12,9 @@ defineOptions({ name: 'Carousel' });
defineProps<{ property: CarouselProperty }>();
const currentIndex = ref(0);
const currentIndex = ref(0); //
/** 处理索引变化 */
const handleIndexChange = (index: number) => {
currentIndex.value = index + 1;
};
@@ -46,5 +48,3 @@ const handleIndexChange = (index: number) => {
</div>
</div>
</template>
<style scoped lang="scss"></style>

View File

@@ -26,7 +26,9 @@ import ComponentContainerProperty from '../../component-container-property.vue';
defineOptions({ name: 'CarouselProperty' });
const props = defineProps<{ modelValue: CarouselProperty }>();
const emit = defineEmits(['update:modelValue']);
const formData = useVModel(props, 'modelValue', emit);
</script>