78 lines
1.7 KiB
Vue
78 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed, defineComponent, reactive, ref } from 'vue'
|
|
import { CLICK_EVENT, PREFIX } from '../_constants'
|
|
import { getMainClass } from '../_utils'
|
|
import { hiteggsEmits, hiteggsProps } from './hiteggs'
|
|
|
|
const props = defineProps(hiteggsProps)
|
|
|
|
const emit = defineEmits(hiteggsEmits)
|
|
const hitIndex = ref()
|
|
const hitClick = ref(false)
|
|
const arr = reactive<any>([])
|
|
const classes = computed(() => {
|
|
return getMainClass(props, componentName)
|
|
})
|
|
function hitEggs(index: number) {
|
|
if (hitClick.value)
|
|
return
|
|
hitClick.value = true
|
|
hitIndex.value = index
|
|
setTimeout(() => {
|
|
arr.push(index)
|
|
hitIndex.value = props.num + 1
|
|
hitClick.value = false
|
|
emit(CLICK_EVENT)
|
|
}, 1500)
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
const componentName = `${PREFIX}-hiteggs`
|
|
|
|
export default defineComponent({
|
|
name: componentName,
|
|
options: {
|
|
virtualHost: true,
|
|
addGlobalClass: true,
|
|
styleIsolation: 'shared',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="classes" :style="customStyle">
|
|
<div
|
|
v-for="(item, index) in num"
|
|
:key="index"
|
|
class="nut-eggs-item"
|
|
:style="{ width, height }"
|
|
>
|
|
<image
|
|
v-if="!(arr.indexOf(index) > -1)"
|
|
class="intactImg"
|
|
:src="intactImg"
|
|
alt=""
|
|
@click="hitEggs(index)"
|
|
/>
|
|
<image
|
|
v-if="arr.indexOf(index) > -1"
|
|
class="splitImg"
|
|
:src="splitImg"
|
|
alt=""
|
|
/>
|
|
<image
|
|
class="hammer"
|
|
:class="{ 'nut-hidden': index !== hitIndex }"
|
|
style="animation: shake-rotate 0.5s linear 0s infinite"
|
|
:src="hammer"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import './index';
|
|
</style>
|