github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-24 16:22:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: 调整倒计时组件

Browse Source
This commit is contained in:
tnt group 2022-09-29 15:21:22 +08:00
parent db8fd7582b
commit 5a79fc4f2d
3 changed files with 113 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/packages/components/Decorates/Mores/CountDown/config.ts
View File

@ -15,24 +15,17 @@ export const FontWeightObject = {
}
export const option = {
// 数据说明
timeSize: 24,
timeLineHeight: 50,
timeTextIndent: 2,
timeColor: '#E6F7FF',
fontWeight: 'normal',
//阴影
showShadow: true,
hShadow: 0,
vShadow: 0,
blurShadow: 8,
colorShadow: '#0075ff'
flipperBgColor: '#ee6600FF',
flipperTextColor: '#336600FF',
flipperWidth: 60,
flipperHeight: 100,
flipperRadius: 10,
flipperSpeed: 600
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = CountDownConfig.key
public attr = { ...chartInitConfig, w: 300, h: 200, zIndex: -1 }
public attr = { ...chartInitConfig, w: 500, h: 200, zIndex: -1 }
public chartConfig = cloneDeep(CountDownConfig)
public option = cloneDeep(option)
}

85
src/packages/components/Decorates/Mores/CountDown/config.vue
View File

@ -1,53 +1,40 @@
<template>
<CollapseItem name="内容" :expanded="true">
<SettingItemBox name="字体">
<SettingItem name="大小">
<n-input-number v-model:value="optionData.timeSize" size="small" :min="1"></n-input-number>
</SettingItem>
<SettingItem name="粗细">
<n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
</SettingItem>
</SettingItemBox>
<SettingItemBox name="间距">
<SettingItem name="字距">
<n-input-number v-model:value="optionData.timeTextIndent" size="small" :min="1"></n-input-number>
</SettingItem>
<SettingItem name="行距">
<n-input-number v-model:value="optionData.timeLineHeight" size="small" :min="1"></n-input-number>
</SettingItem>
</SettingItemBox>
<collapse-item name="翻牌" :expanded="true">
<setting-item-box name="尺寸">
<setting-item name="宽度">
<n-input-number v-model:value="optionData.flipperWidth" size="small" :min="1"></n-input-number>
</setting-item>
<setting-item name="高度">
<n-input-number v-model:value="optionData.flipperHeight" size="small" :min="1"></n-input-number>
</setting-item>
</setting-item-box>
<SettingItemBox name="颜色">
<SettingItem name="时间">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.timeColor"></n-color-picker>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="阴影">
<SettingItem>
<n-space>
<n-switch v-model:value="optionData.showShadow" size="small" />
<n-text>展示阴影</n-text>
</n-space>
</SettingItem>
<SettingItem name="x">
<n-input-number v-model:value="optionData.hShadow" size="small"></n-input-number
></SettingItem>
<SettingItem name="y">
<n-input-number v-model:value="optionData.vShadow" size="small"></n-input-number
></SettingItem>
<SettingItem name="模糊">
<n-input-number v-model:value="optionData.blurShadow" size="small"></n-input-number
></SettingItem>
<SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorShadow"></n-color-picker
></SettingItem>
</SettingItemBox>
</CollapseItem>
<setting-item-box name="样式">
<setting-item name="背景色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.flipperBgColor"></n-color-picker>
</setting-item>
<setting-item name="字体色">
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.flipperTextColor"></n-color-picker>
</setting-item>
<setting-item name="圆角">
<n-input-number v-model:value="optionData.flipperRadius" size="small" :min="0"></n-input-number>
</setting-item>
<setting-item name="翻牌速度">
<n-input-number
v-model:value="optionData.flipperSpeed"
size="small"
:min="100"
:max="900"
:step="100"
></n-input-number>
</setting-item>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { option, FontWeightEnum, FontWeightObject } from './config'
import { option } from './config'
const props = defineProps({
optionData: {
@ -55,14 +42,4 @@ const props = defineProps({
required: true
}
})
const fontWeightOptions = [
{
label: FontWeightEnum.NORMAL,
value: FontWeightObject[FontWeightEnum.NORMAL]
},
{
label: FontWeightEnum.BOLD,
value: FontWeightObject[FontWeightEnum.BOLD]
}
]
</script>

91
src/packages/components/Decorates/Mores/CountDown/index.vue
View File

@ -1,9 +1,73 @@
<template>
<div class="go-decorates-more-countdown">
<div>剩余时间</div>
<n-countdown :duration="50000" :active="true" />
<flipper :front-text="9" ref="flipperRef" />
<div>。</div>
<n-space :gap="10">
<flipper
:front-text="9"
:width="flipperWidth"
:height="flipperHeight"
:front-color="flipperTextColor"
:back-color="flipperBgColor"
:radius="flipperRadius"
:duration="flipperSpeed"
ref="flipperRef"
/>
<flipper
:front-text="9"
:back-text="8"
:width="flipperWidth"
:height="flipperHeight"
:front-color="flipperTextColor"
:back-color="flipperBgColor"
:radius="flipperRadius"
:duration="flipperSpeed"
ref="flipperRef2"
/>
<flipper
:front-text="8"
:back-text="7"
:width="flipperWidth"
:height="flipperHeight"
:front-color="flipperTextColor"
:back-color="flipperBgColor"
:radius="flipperRadius"
:duration="flipperSpeed"
ref="flipperRef3"
/>
<flipper
:front-text="7"
:back-text="7"
:width="flipperWidth"
:height="flipperHeight"
:front-color="flipperTextColor"
:back-color="flipperBgColor"
:radius="flipperRadius"
:duration="flipperSpeed"
ref="flipperRef4"
/>
<flipper
:front-text="6"
:back-text="5"
:width="flipperWidth"
:height="flipperHeight"
:front-color="flipperTextColor"
:back-color="flipperBgColor"
:radius="flipperRadius"
:duration="flipperSpeed"
ref="flipperRef5"
/>
<flipper
:front-text="5"
:back-text="4"
:width="flipperWidth"
:height="flipperHeight"
:front-color="flipperTextColor"
:back-color="flipperBgColor"
:radius="flipperRadius"
:duration="flipperSpeed"
ref="flipperRef6"
/>
</n-space>
</div>
</template>
@ -24,18 +88,9 @@ let boxShadow = ref('none')
const { w, h } = toRefs(props.chartConfig.attr)
let {
timeColor,
timeSize,
timeLineHeight,
timeTextIndent,
fontWeight,
showShadow,
hShadow,
vShadow,
blurShadow,
colorShadow
} = toRefs(props.chartConfig.option)
let { flipperBgColor, flipperTextColor, flipperWidth, flipperHeight, flipperRadius, flipperSpeed } = toRefs(
props.chartConfig.option
)
watch(
props.chartConfig.option,
@ -58,7 +113,7 @@ let interval = 0
onMounted(() => {
const interval = window.setInterval(() => {
COUNT--
if (COUNT === 0) window.clearInterval(interval)
if (COUNT <= 1) window.clearInterval(interval)
const flipperCON: any = flipperRef.value
flipperCON?.flipDown(COUNT, COUNT - 1)
}, 1000)
@ -73,5 +128,9 @@ useChartDataFetch(props.chartConfig, useChartEditStore)
@include go('decorates-more-countdown') {
width: v-bind('`${w}px`');
height: v-bind('`${h}px`');
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>