feat:【mall】diy editor 的 carousel 统一小写
This commit is contained in:
@@ -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: '轮播图',
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user