mirror of
https://gitee.com/dromara/go-view.git
synced 2024-12-02 03:38:27 +08:00
style: 去除多余代码
This commit is contained in:
奔跑的面条
parent
a2f32b0289
commit
e411cb9b09
@ -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…
Reference in New Issue
Block a user