当前位置：首页 > VUE

vue实现砸金蛋

2026-03-09 08:25:32VUE

Vue 实现砸金蛋功能

砸金蛋是一种常见的互动游戏，通常用于抽奖或营销活动。以下是使用 Vue 实现砸金蛋功能的详细步骤。

准备工作

确保已安装 Vue.js 和相关依赖。可以通过以下命令安装 Vue：

npm install vue

创建砸金蛋组件

创建一个 Vue 组件，命名为 GoldenEgg.vue，用于实现砸金蛋的核心功能。

<template>
  <div class="golden-egg-container">
    <div class="egg" @click="hitEgg" :class="{ 'broken': isBroken }">
      <img v-if="!isBroken" src="path/to/egg-image.png" alt="Golden Egg">
      <img v-else src="path/to/broken-egg-image.png" alt="Broken Egg">
    </div>
    <div v-if="showPrize" class="prize">
      {{ prize }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isBroken: false,
      showPrize: false,
      prize: '',
      prizes: ['一等奖', '二等奖', '三等奖', '谢谢参与']
    }
  },
  methods: {
    hitEgg() {
      if (this.isBroken) return;
      this.isBroken = true;
      setTimeout(() => {
        this.showPrize = true;
        this.prize = this.prizes[Math.floor(Math.random() * this.prizes.length)];
      }, 500);
    }
  }
}
</script>

<style>
.golden-egg-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.egg {
  cursor: pointer;
  transition: transform 0.3s;
}

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

.broken {
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.prize {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
}
</style>

实现砸金蛋动画

通过 CSS 动画模拟砸金蛋的效果。在 hitEgg 方法中触发动画，并在动画结束后显示奖品。

随机奖品逻辑

在 prizes 数组中定义奖品列表，通过随机数生成器选择奖品。可以根据需求调整奖品内容和概率。

集成到主应用

将 GoldenEgg 组件集成到主应用中：

<template>
  <div id="app">
    <GoldenEgg />
  </div>
</template>

<script>
import GoldenEgg from './components/GoldenEgg.vue'

export default {
  components: {
    GoldenEgg
  }
}
</script>