chore: 基本完成翻牌器

This commit is contained in:
tnt group 2022-09-30 01:29:48 +08:00
parent 73ce3a8551
commit 77a763db75
4 changed files with 60 additions and 57 deletions

View File

@ -1,26 +1,28 @@
<template> <template>
<div class="M-Flipper" :class="[flipType, { go: isFlipping }]"> <div class="M-Flipper" :class="[flipType, { go: isFlipping }]">
<div class="digital front" :data-front="frontTextFromData || 0"></div> <div class="digital front" :data-front="frontTextFromData"></div>
<div class="digital back" :data-back="backTextFromData || 0"></div> <div class="digital back" :data-back="backTextFromData"></div>
</div> </div>
</template> </template>
<script lang="ts">
export default {
name: 'Flipper'
}
</script>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, PropType, watch } from 'vue' import { ref, PropType, watch } from 'vue'
type FlipType = 'up' | 'down' type FlipType = 'up' | 'down'
const props = defineProps({ const props = defineProps({
flipType: { flipType: {
type: Object as PropType<FlipType>, type: String as PropType<FlipType>,
default: () => { default: () => {
return 'down' return 'down'
} }
}, },
frontText: { count: {
type: [Number, String],
default: 0
},
backText: {
type: [Number, String], type: [Number, String],
default: 0 default: 0
}, },
@ -51,13 +53,11 @@ const props = defineProps({
}) })
const isFlipping = ref(false) const isFlipping = ref(false)
const frontTextFromData = ref(props.frontText) const frontTextFromData = ref(props.count || 0)
const backTextFromData = ref(props.backText) const backTextFromData = ref(props.count || 0)
// //
const flip = (front: string | number, back: string | number) => { const flip = (front: string | number, back: string | number) => {
if (!back) back = +front - 1
console.log('flip:', { front, back })
// //
if (isFlipping.value) return if (isFlipping.value) return
// //
@ -75,19 +75,14 @@ const flip = (front: string | number, back: string | number) => {
} }
watch( watch(
() => props.backText, () => props.count,
(newVal, oldVal) => { (newVal, oldVal) => {
console.log('watch:props.backText', newVal) flip(oldVal as string | number, newVal as string | number)
flip(newVal, oldVal as string | number)
}, },
{ {
immediate: true immediate: true
} }
) )
defineExpose({
flip
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -171,7 +166,7 @@ $lineColor: #ffffff;
top: 0; top: 0;
bottom: 50%; bottom: 50%;
border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0;
border-bottom: solid 1px rgba($color: $lineColor, $alpha: 0.5); // 线 border-bottom: solid 1px rgba($color: $lineColor, $alpha: 0.3); // 线
} }
.digital:after { .digital:after {
top: 50%; top: 50%;

View File

@ -15,12 +15,14 @@ export const FontWeightObject = {
} }
export const option = { export const option = {
dataset: 203234,
flipperLength: 6,
flipperBgColor: '#ee6600FF', flipperBgColor: '#ee6600FF',
flipperTextColor: '#FFFFFFFF', flipperTextColor: '#FFFFFFFF',
flipperWidth: 60, flipperWidth: 60,
flipperHeight: 100, flipperHeight: 100,
flipperRadius: 10, flipperRadius: 10,
flipperSpeed: 600 flipperSpeed: 450
} }
export default class Config extends PublicConfigClass implements CreateComponentType { export default class Config extends PublicConfigClass implements CreateComponentType {

View File

@ -1,5 +1,14 @@
<template> <template>
<collapse-item name="翻牌" :expanded="true"> <collapse-item name="翻牌" :expanded="true">
<setting-item-box name="内容">
<setting-item name="初始值">
<n-input-number v-model:value="optionData.dataset" size="small" :min="0"></n-input-number>
</setting-item>
<setting-item name="个数">
<n-input-number v-model:value="optionData.flipperLength" size="small" :min="1"></n-input-number>
</setting-item>
</setting-item-box>
<setting-item-box name="尺寸"> <setting-item-box name="尺寸">
<setting-item name="宽度"> <setting-item name="宽度">
<n-input-number v-model:value="optionData.flipperWidth" size="small" :min="1"></n-input-number> <n-input-number v-model:value="optionData.flipperWidth" size="small" :min="1"></n-input-number>

View File

@ -1,25 +1,25 @@
<template> <template>
<div class="go-decorates-more-countdown"> <div class="go-decorates-more-countdown">
<n-countdown :duration="50000" :active="true" /> <!-- <n-countdown :duration="50000" :active="true" /> -->
<n-space :gap="10"> <n-space :gap="10">
<flipper <flipper
flip-type="down" flip-type="down"
:front-text="0" :count="item"
:back-text="COUNT"
:width="flipperWidth" :width="flipperWidth"
:height="flipperHeight" :height="flipperHeight"
:front-color="flipperTextColor" :front-color="flipperTextColor"
:back-color="flipperBgColor" :back-color="flipperBgColor"
:radius="flipperRadius" :radius="flipperRadius"
:duration="flipperSpeed" :duration="flipperSpeed"
ref="flipperRef" v-for="(item, index) in flipperData"
:key="index"
/> />
</n-space> </n-space>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PropType, toRefs, ref, watch, onMounted, onUnmounted } from 'vue' import { PropType, toRefs, watch, computed } from 'vue'
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartDataFetch } from '@/hooks' import { useChartDataFetch } from '@/hooks'
@ -31,49 +31,47 @@ const props = defineProps({
required: true required: true
} }
}) })
let boxShadow = ref('none')
const { w, h } = toRefs(props.chartConfig.attr) const { w, h } = toRefs(props.chartConfig.attr)
let { flipperBgColor, flipperTextColor, flipperWidth, flipperHeight, flipperRadius, flipperSpeed } = toRefs( const {
props.chartConfig.option dataset,
) flipperLength,
flipperBgColor,
flipperTextColor,
flipperWidth,
flipperHeight,
flipperRadius,
flipperSpeed
} = toRefs(props.chartConfig.option)
const updateDatasetHandler = (newVal: number) => {
let datasetVal = dataset?.value as Number
datasetVal !== undefined && (datasetVal = newVal)
}
watch( watch(
props.chartConfig.option, props.chartConfig.option.dataset,
() => { (newVal: number) => {
if (props.chartConfig.option.showShadow) { updateDatasetHandler(newVal)
boxShadow.value = `${props.chartConfig.option.hShadow}px ${props.chartConfig.option.vShadow}px ${props.chartConfig.option.blurShadow}px ${props.chartConfig.option.colorShadow}`
} else {
boxShadow.value = 'none'
}
}, },
{ {
immediate: true immediate: true
} }
) )
const flipperRef = ref(null) const flipperData = computed(() => {
const datasetVal: Number = dataset?.value || 0
return datasetVal
.toString()
.padStart(flipperLength.value, '0')
.split('')
.slice(flipperLength.value * -1)
})
let COUNT = 9 useChartDataFetch(props.chartConfig, useChartEditStore, (newVal: number) => {
let interval = 0 updateDatasetHandler(newVal)
onMounted(() => {
const interval = window.setInterval(() => {
if (COUNT <= 1) {
window.clearInterval(interval)
return
}
COUNT--
const flipperCON: any = flipperRef.value
console.log(flipperCON)
flipperCON?.flip(COUNT, COUNT - 1)
console.log('onMounted:window.setInterval', COUNT)
}, 1000)
}) })
onUnmounted(() => {
window.clearInterval(interval)
})
useChartDataFetch(props.chartConfig, useChartEditStore)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -81,7 +79,6 @@ useChartDataFetch(props.chartConfig, useChartEditStore)
width: v-bind('`${w}px`'); width: v-bind('`${w}px`');
height: v-bind('`${h}px`'); height: v-bind('`${h}px`');
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }