mirror of
https://gitee.com/dromara/go-view.git
synced 2024-12-05 13:18:48 +08:00
chore: 基本完成翻牌器
This commit is contained in:
parent
73ce3a8551
commit
77a763db75
@ -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%;
|
||||||
|
@ -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 {
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user