diff --git a/src/packages/components/Informations/Mores/Carousel/config.ts b/src/packages/components/Informations/Mores/Carousel/config.ts new file mode 100644 index 00000000..78a6f284 --- /dev/null +++ b/src/packages/components/Informations/Mores/Carousel/config.ts @@ -0,0 +1,47 @@ +import { PublicConfigClass } from '@/packages/public' +import { CreateComponentType } from '@/packages/index.d' +import { CarouselConfig } from './index' +import cloneDeep from 'lodash/cloneDeep' +import logo from '@/assets/logo.png' + +// 示例图片资源 +const modules = import.meta.globEager("./images/*"); +const dataset = [logo] +for (var item in modules) { + dataset.push(modules[item].default) +} + +export const option = { + // 图片资源列表 + dataset: dataset, + // 自动播放 + autoplay: true, + // 自动播放的间隔(ms) + interval: 5000, + // 每页显示的图片数量 + slidesPerview: 1, + // 轮播方向 + direction: "horizontal", + // 拖曳切换 + draggable: true, + // 居中显示 + centeredSlides: false, + // 过渡效果 + effect: "slide", + // 是否显示指示点 + showDots: true, + // 指示器样式 + dotType: "dot", + // 指示器位置 + dotPlacement: "bottom", + // 显示箭头 + showArrow: false, + // 图片样式 + fit: "contain", +} + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key = CarouselConfig.key + public chartConfig = cloneDeep(CarouselConfig) + public option = cloneDeep(option) +} diff --git a/src/packages/components/Informations/Mores/Carousel/config.vue b/src/packages/components/Informations/Mores/Carousel/config.vue new file mode 100644 index 00000000..da3f7492 --- /dev/null +++ b/src/packages/components/Informations/Mores/Carousel/config.vue @@ -0,0 +1,176 @@ + + + diff --git a/src/packages/components/Informations/Mores/Carousel/images/carousel.png b/src/packages/components/Informations/Mores/Carousel/images/carousel.png new file mode 100644 index 00000000..95f366b1 Binary files /dev/null and b/src/packages/components/Informations/Mores/Carousel/images/carousel.png differ diff --git a/src/packages/components/Informations/Mores/Carousel/images/carousel2.png b/src/packages/components/Informations/Mores/Carousel/images/carousel2.png new file mode 100644 index 00000000..d8a6859f Binary files /dev/null and b/src/packages/components/Informations/Mores/Carousel/images/carousel2.png differ diff --git a/src/packages/components/Informations/Mores/Carousel/index.ts b/src/packages/components/Informations/Mores/Carousel/index.ts new file mode 100644 index 00000000..fbb8d35c --- /dev/null +++ b/src/packages/components/Informations/Mores/Carousel/index.ts @@ -0,0 +1,14 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' + +export const CarouselConfig: ConfigType = { + key: 'Carousel', + chartKey: 'VCarousel', + conKey: 'VCCarousel', + title: '轮播图', + category: ChatCategoryEnum.MORE, + categoryName: ChatCategoryEnumName.MORE, + package: PackagesCategoryEnum.INFORMATIONS, + chartFrame: ChartFrameEnum.NAIVE_UI, + image: 'photo.png' +} diff --git a/src/packages/components/Informations/Mores/Carousel/index.vue b/src/packages/components/Informations/Mores/Carousel/index.vue new file mode 100644 index 00000000..3018fbc2 --- /dev/null +++ b/src/packages/components/Informations/Mores/Carousel/index.vue @@ -0,0 +1,47 @@ + + diff --git a/src/packages/components/Informations/Mores/index.ts b/src/packages/components/Informations/Mores/index.ts index 8fadc441..0e842ce0 100644 --- a/src/packages/components/Informations/Mores/index.ts +++ b/src/packages/components/Informations/Mores/index.ts @@ -2,5 +2,6 @@ import { ImageConfig } from './Image/index' import { IframeConfig } from './Iframe/index' import { VideoConfig } from './Video/index' import { WordCloudConfig } from './WordCloud/index' +import { CarouselConfig } from './Carousel/index' -export default [WordCloudConfig, ImageConfig, VideoConfig, IframeConfig] +export default [WordCloudConfig, ImageConfig, VideoConfig, IframeConfig, CarouselConfig]