style: 去除多余代码
This commit is contained in:
奔跑的面条
parent
f965a87a36
commit
3c3cdbff91
@ -1,47 +0,0 @@
|
|||||||
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)
|
|
||||||
}
|
|
||||||
@ -1,176 +0,0 @@
|
|||||||
<template>
|
|
||||||
<collapse-item name="属性" :expanded="true">
|
|
||||||
<setting-item-box name="路径" :alone="true">
|
|
||||||
<setting-item v-for="item, index in optionData.dataset" :key="index">
|
|
||||||
<n-input-group>
|
|
||||||
<n-input v-model:value="optionData.dataset[index]" size="small" placeholder="请输入图片地址"></n-input>
|
|
||||||
<n-button ghost @click="optionData.dataset.splice(index, 1)">
|
|
||||||
-
|
|
||||||
</n-button>
|
|
||||||
</n-input-group>
|
|
||||||
</setting-item>
|
|
||||||
<setting-item>
|
|
||||||
<n-button size="small" @click="optionData.dataset.push('')">
|
|
||||||
+
|
|
||||||
</n-button>
|
|
||||||
</setting-item>
|
|
||||||
</setting-item-box>
|
|
||||||
<setting-item-box name="播放器">
|
|
||||||
<setting-item>
|
|
||||||
<n-space>
|
|
||||||
<n-switch v-model:value="optionData.autoplay" size="small" />
|
|
||||||
<n-text>自动播放</n-text>
|
|
||||||
</n-space>
|
|
||||||
</setting-item>
|
|
||||||
<!-- 开启自动播放时，设置间隔时间 -->
|
|
||||||
<setting-item name="间隔时间">
|
|
||||||
<n-input-number v-model:value="optionData.interval" size="small" placeholder=""></n-input-number>
|
|
||||||
</setting-item>
|
|
||||||
<setting-item name="轮播方向">
|
|
||||||
<n-select v-model:value="optionData.direction" :options="directions" placeholder="选择方向" />
|
|
||||||
</setting-item>
|
|
||||||
<setting-item name="过渡效果">
|
|
||||||
<n-select v-model:value="optionData.effect" :options="effects" placeholder="效果" />
|
|
||||||
</setting-item>
|
|
||||||
<setting-item name="每页数量">
|
|
||||||
<n-input-number v-model:value="optionData.slidesPerview" size="small" placeholder=""></n-input-number>
|
|
||||||
</setting-item>
|
|
||||||
<setting-item>
|
|
||||||
<n-space>
|
|
||||||
<n-switch v-model:value="optionData.centeredSlides" size="small" />
|
|
||||||
<n-text>居中显示</n-text>
|
|
||||||
</n-space>
|
|
||||||
</setting-item>
|
|
||||||
<setting-item name="图片样式">
|
|
||||||
<n-select v-model:value="optionData.fit" :options="fitList" placeholder="样式" />
|
|
||||||
</setting-item>
|
|
||||||
</setting-item-box>
|
|
||||||
|
|
||||||
<setting-item-box name="指示器">
|
|
||||||
<setting-item name="样式">
|
|
||||||
<n-select v-model:value="optionData.dotType" :options="dotTypes" placeholder="选择样式" />
|
|
||||||
</setting-item>
|
|
||||||
<setting-item name="位置">
|
|
||||||
<n-select v-model:value="optionData.dotPlacement" :options="dotPlacements" placeholder="选择位置" />
|
|
||||||
</setting-item>
|
|
||||||
<setting-item>
|
|
||||||
<n-space>
|
|
||||||
<n-switch v-model:value="optionData.showDots" size="small" />
|
|
||||||
<n-text>显示</n-text>
|
|
||||||
</n-space>
|
|
||||||
</setting-item>
|
|
||||||
<setting-item>
|
|
||||||
<n-space>
|
|
||||||
<n-switch v-model:value="optionData.showArrow" size="small" />
|
|
||||||
<n-text>箭头</n-text>
|
|
||||||
</n-space>
|
|
||||||
</setting-item>
|
|
||||||
<setting-item>
|
|
||||||
<n-space>
|
|
||||||
<n-switch v-model:value="optionData.draggable" size="small" />
|
|
||||||
<n-text>拖曳切换</n-text>
|
|
||||||
</n-space>
|
|
||||||
</setting-item>
|
|
||||||
</setting-item-box>
|
|
||||||
|
|
||||||
</collapse-item>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { PropType } from 'vue'
|
|
||||||
import { option } from './config'
|
|
||||||
import {
|
|
||||||
CollapseItem,
|
|
||||||
SettingItemBox,
|
|
||||||
SettingItem
|
|
||||||
} from '@/components/Pages/ChartItemSetting'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
optionData: {
|
|
||||||
type: Object as PropType<typeof option>,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 字典
|
|
||||||
const dotTypes = [
|
|
||||||
{
|
|
||||||
label: "点",
|
|
||||||
value: "dot"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "线",
|
|
||||||
value: "line"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const directions = [
|
|
||||||
{
|
|
||||||
label: "水平方向",
|
|
||||||
value: "horizontal"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "垂直方向",
|
|
||||||
value: "vertical"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const effects = [
|
|
||||||
{
|
|
||||||
label: "slide",
|
|
||||||
value: "slide"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "fade",
|
|
||||||
value: "fade"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "card",
|
|
||||||
value: "card"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "custom",
|
|
||||||
value: "custom"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const dotPlacements = [
|
|
||||||
{
|
|
||||||
label: "上边",
|
|
||||||
value: "top"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "下边",
|
|
||||||
value: "bottom"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "左边",
|
|
||||||
value: "left"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "右边",
|
|
||||||
value: "right"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
// 适应类型
|
|
||||||
const fitList = [
|
|
||||||
{
|
|
||||||
value: 'fill',
|
|
||||||
label: 'fill'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'contain',
|
|
||||||
label: 'contain'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'cover',
|
|
||||||
label: 'cover'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'scale-down',
|
|
||||||
label: 'scale-down'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'none',
|
|
||||||
label: 'none'
|
|
||||||
},
|
|
||||||
]
|
|
||||||
</script>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
@ -1,14 +0,0 @@
|
|||||||
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'
|
|
||||||
}
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<n-carousel :autoplay="autoplay" :interval="interval" :centered-slides="centeredSlides" :direction="direction"
|
|
||||||
:dot-placement="dotPlacement" :dot-type="dotType" :draggable="draggable" :effect="effect"
|
|
||||||
:slides-per-view="slidesPerview" :show-arrow="showArrow" :show-dots="showDots">
|
|
||||||
<n-image v-for="url in option.dataset" :object-fit="fit" preview-disabled :src="url"
|
|
||||||
:fallback-src="requireErrorImg()" :width="w" :height="h"></n-image>
|
|
||||||
</n-carousel>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { PropType, toRefs, shallowReactive, watch } from 'vue'
|
|
||||||
import { CreateComponentType } from '@/packages/index.d'
|
|
||||||
import { requireErrorImg } from '@/utils'
|
|
||||||
import { useChartDataFetch } from '@/hooks'
|
|
||||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
|
||||||
import { option as configOption } from './config'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
chartConfig: {
|
|
||||||
type: Object as PropType<CreateComponentType>,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const option = shallowReactive({
|
|
||||||
dataset: configOption.dataset
|
|
||||||
})
|
|
||||||
|
|
||||||
const { w, h } = toRefs(props.chartConfig.attr)
|
|
||||||
const { autoplay, interval, slidesPerview, direction, draggable, centeredSlides, effect, dotType, dotPlacement, showArrow, showDots, fit } = toRefs(props.chartConfig.option)
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.chartConfig.option.dataset,
|
|
||||||
(newData: any) => {
|
|
||||||
option.dataset = newData
|
|
||||||
},
|
|
||||||
{
|
|
||||||
immediate: true,
|
|
||||||
deep: false
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
|
||||||
option.dataset = newData
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user