当前位置：首页 > VUE

vue实现砸金蛋

2026-02-17 19:50:54VUE

Vue 实现砸金蛋功能

准备工作

确保已安装 Vue.js 环境，可以通过以下命令创建项目：

npm init vue@latest

组件结构设计

创建 GoldenEgg.vue 文件，包含以下核心结构：

<template>
  <div class="egg-container">
    <div 
      class="egg" 
      :class="{ 'egg-broken': isBroken }"
      @click="hitEgg"
    >
      <div v-if="!isBroken">🎁</div>
      <div v-else class="prize">{{ prize }}</div>
    </div>
  </div>
</template>

数据与逻辑实现

<script>
export default {
  data() {
    return {
      isBroken: false,
      prizes: ['100元', '优惠券', '谢谢参与', '神秘大奖'],
      prize: ''
    }
  },
  methods: {
    hitEgg() {
      if (this.isBroken) return;

      // 随机选择奖品
      const randomIndex = Math.floor(Math.random() * this.prizes.length);
      this.prize = this.prizes[randomIndex];

      // 触发动画
      this.isBroken = true;

      // 重置功能（可选）
      setTimeout(() => {
        this.isBroken = false;
      }, 3000);
    }
  }
}
</script>

样式设计

<style scoped>
.egg-container {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.egg {
  width: 200px;
  height: 250px;
  background-color: #FFD700;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  cursor: pointer;
  transition: all 0.5s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.egg-broken {
  transform: scale(0.9);
  background-color: #FFA500;
  animation: shake 0.5s;
}

.prize {
  font-size: 24px;
  color: white;
  text-align: center;
}

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

进阶功能

添加音效增强体验：

<template>
  <audio ref="crackSound" src="@/assets/crack.mp3" preload="auto"></audio>
</template>

<script>
methods: {
  hitEgg() {
    this.$refs.crackSound.play();
    // ...原有逻辑
  }
}
</script>

多蛋排列方案

<div class="egg-group">
  <GoldenEgg v-for="(egg, index) in 5" :key="index" />
</div>

<style>
.egg-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
</style>

注意事项

音效文件需放在 public 或 assets 目录
移动端需添加 @touchstart 事件支持触摸

奖品概率可通过加权数组实现：

prizes: [
{ name: '100元', weight: 1 },
{ name: '优惠券', weight: 3 }
]

vue实现砸金蛋

标签: vue 砸金蛋

分享给朋友：

vue实现微博发布动态

使用Vue实现微博发布动态功能创建Vue组件结构新建一个WeiboPost.vue组件，包含文本框、图片上传和发布按钮： <template> <div class="w…

vue实现muli

Vue 实现多语言（i18n）支持在 Vue 项目中实现多语言（i18n）功能，通常使用 vue-i18n 插件。以下是具体实现步骤：安装 vue-i18n npm install vue-i…

vue 实现赋值

Vue 实现赋值的方法在 Vue 中，赋值操作通常涉及数据绑定和响应式更新。以下是几种常见的赋值方式：直接赋值给 data 属性在 Vue 实例的 data 对象中定义的属性可以直接通过 t…

vue toast实现

Vue Toast 实现方法使用第三方库（推荐）安装 vue-toastification 库，这是一个功能丰富且轻量级的 Vue Toast 插件。 npm install vue-toas…

vue 实现图片

Vue 实现图片加载与展示的方法在 Vue 中实现图片加载和展示可以通过多种方式完成，以下是一些常见的方法：使用 v-bind 绑定图片路径通过 v-bind（或简写为 :）动态绑定图片…

vue实现eventbus

Vue 中实现 EventBus 在 Vue 中，EventBus 是一种跨组件通信的机制，尤其适用于非父子组件之间的数据传递。以下是实现 EventBus 的几种方法：方法一：使用 Vue 实…

vue实现砸金蛋