当前位置：首页 > VUE

vue实现砸金蛋

2026-03-29 20:05:06VUE

实现砸金蛋的Vue组件

准备工作

安装Vue和相关依赖

npm install vue hammerjs

组件结构

创建金蛋组件模板

<template>
  <div class="egg-container">
    <div 
      class="egg" 
      @click="crackEgg"
      :class="{ 'cracked': isCracked }"
    >
      <div class="prize" v-if="isCracked">
        {{ prize }}
      </div>
    </div>
  </div>
</template>

组件逻辑

实现砸蛋交互功能

<script>
export default {
  data() {
    return {
      isCracked: false,
      prize: '',
      prizes: ['一等奖', '二等奖', '谢谢参与']
    }
  },
  methods: {
    crackEgg() {
      if(this.isCracked) return;

      this.isCracked = true;
      const randomIndex = Math.floor(Math.random() * this.prizes.length);
      this.prize = this.prizes[randomIndex];

      // 触发父组件事件
      this.$emit('egg-cracked', this.prize);
    }
  }
}
</script>

样式设计

添加金蛋动画效果

<style scoped>
.egg-container {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.egg {
  width: 150px;
  height: 200px;
  background: linear-gradient(to bottom, #FFD700, #FFA500);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  cursor: pointer;
  position: relative;
  box-shadow: 0 10px 15px rgba(0,0,0,0.2);
  transition: transform 0.3s;
}

.egg:hover {
  transform: scale(1.05);
}

.cracked {
  background: linear-gradient(to bottom, #D3D3D3, #A9A9A9);
  animation: crack 0.5s forwards;
}

.prize {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
  color: #FF4500;
}

@keyframes crack {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
</style>

使用组件

在父组件中使用金蛋组件

<template>
  <div>
    <h3>砸金蛋游戏</h3>
    <EggComponent @egg-cracked="handlePrize" />
  </div>
</template>

<script>
import EggComponent from './EggComponent.vue';

export default {
  components: {
    EggComponent
  },
  methods: {
    handlePrize(prize) {
      alert(`恭喜获得: ${prize}`);
    }
  }
}
</script>

增强功能

添加Hammer.js实现手势操作

vue实现砸金蛋

import Hammer from 'hammerjs';

mounted() {
  const hammer = new Hammer(this.$el.querySelector('.egg'));
  hammer.on('swipe', () => {
    this.crackEgg();
  });
}