feat:【mall】diy editor 的 carousel 统一小写
This commit is contained in:
@@ -2,32 +2,23 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
|
|||||||
|
|
||||||
/** 轮播图属性 */
|
/** 轮播图属性 */
|
||||||
export interface CarouselProperty {
|
export interface CarouselProperty {
|
||||||
// 类型:默认 | 卡片
|
type: 'card' | 'default'; // 类型:默认 | 卡片
|
||||||
type: 'card' | 'default';
|
indicator: 'dot' | 'number'; // 指示器样式:点 | 数字
|
||||||
// 指示器样式:点 | 数字
|
autoplay: boolean; // 是否自动播放
|
||||||
indicator: 'dot' | 'number';
|
interval: number; // 播放间隔
|
||||||
// 是否自动播放
|
items: CarouselItemProperty[]; // 轮播内容
|
||||||
autoplay: boolean;
|
style: ComponentStyle; // 组件样式
|
||||||
// 播放间隔
|
|
||||||
interval: number;
|
|
||||||
// 轮播内容
|
|
||||||
items: CarouselItemProperty[];
|
|
||||||
// 组件样式
|
|
||||||
style: ComponentStyle;
|
|
||||||
}
|
|
||||||
// 轮播内容属性
|
|
||||||
export interface CarouselItemProperty {
|
|
||||||
// 类型:图片 | 视频
|
|
||||||
type: 'img' | 'video';
|
|
||||||
// 图片链接
|
|
||||||
imgUrl: string;
|
|
||||||
// 视频链接
|
|
||||||
videoUrl: string;
|
|
||||||
// 跳转链接
|
|
||||||
url: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 定义组件
|
/** 轮播内容属性 */
|
||||||
|
export interface CarouselItemProperty {
|
||||||
|
type: 'img' | 'video'; // 类型:图片 | 视频
|
||||||
|
imgUrl: string; // 图片链接
|
||||||
|
videoUrl: string; // 视频链接
|
||||||
|
url: string; // 跳转链接
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 定义组件 */
|
||||||
export const component = {
|
export const component = {
|
||||||
id: 'Carousel',
|
id: 'Carousel',
|
||||||
name: '轮播图',
|
name: '轮播图',
|
||||||
@@ -12,7 +12,9 @@ defineOptions({ name: 'Carousel' });
|
|||||||
|
|
||||||
defineProps<{ property: CarouselProperty }>();
|
defineProps<{ property: CarouselProperty }>();
|
||||||
|
|
||||||
const currentIndex = ref(0);
|
const currentIndex = ref(0); // 当前索引
|
||||||
|
|
||||||
|
/** 处理索引变化 */
|
||||||
const handleIndexChange = (index: number) => {
|
const handleIndexChange = (index: number) => {
|
||||||
currentIndex.value = index + 1;
|
currentIndex.value = index + 1;
|
||||||
};
|
};
|
||||||
@@ -46,5 +48,3 @@ const handleIndexChange = (index: number) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
|
||||||
@@ -26,7 +26,9 @@ import ComponentContainerProperty from '../../component-container-property.vue';
|
|||||||
defineOptions({ name: 'CarouselProperty' });
|
defineOptions({ name: 'CarouselProperty' });
|
||||||
|
|
||||||
const props = defineProps<{ modelValue: CarouselProperty }>();
|
const props = defineProps<{ modelValue: CarouselProperty }>();
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue']);
|
const emit = defineEmits(['update:modelValue']);
|
||||||
|
|
||||||
const formData = useVModel(props, 'modelValue', emit);
|
const formData = useVModel(props, 'modelValue', emit);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
Reference in New Issue
Block a user