当前位置：首页 > VUE

vue实现砸金蛋

2026-02-17 19:50:54VUE

Vue 实现砸金蛋功能

准备工作

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

vue实现砸金蛋

npm init vue@latest

组件结构设计

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

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 实现豆瓣电影类功能的实现方案，涵盖核心模块和技术要点：数据获取与 API 调用使用豆瓣开放 API（需注意调用频率限制）或第三方代理接口推荐 axios 进行异步请求，配合…

vue 实现树状

Vue 实现树状结构的方法递归组件实现树状结构递归组件是 Vue 中实现树状结构的常见方法。通过组件自身调用自身，可以轻松构建多层级树状结构。 <template> <ul…

vue实现datalist

使用 Vue 实现 HTML5 的 datalist 功能 HTML5 的 <datalist> 元素提供了一种自动完成输入框的功能，允许用户在输入时从预定义的选项列表中选择。以下是几种在…

vue轮播实现

Vue 轮播实现方法使用第三方库（推荐）安装 swiper 或 vue-awesome-swiper 库，快速实现功能丰富的轮播效果。以 vue-awesome-swiper 为例： npm…

vue实现 hover

实现 Vue 中的 hover 效果在 Vue 中实现 hover 效果可以通过多种方式完成，以下是常见的几种方法：使用 CSS 伪类最简单的方式是直接使用 CSS 的 :hover 伪类，无…

vue jwt实现

Vue JWT 实现方法安装依赖确保项目中安装了 jsonwebtoken（后端）和 axios（前端）。若使用 Vue 3，可搭配 vue-router 和 pinia（或 vuex）管理状态。…

vue实现砸金蛋