JS-VUE-九宫格抽奖

2024-01-23 17:27:49

前言

继之前两篇“老虎机抽奖”、“大转盘抽奖”，所以把九宫格也一并补全了，整体的实现方案不是很复杂，就是dom以及中奖的配置需要特别注意一下，好了话不多少，直接开始~

实现步骤

搭建项目脚手架

首先，你需要创建一个新的项目脚手架。你可以使用 Vue CLI 来快速搭建一个项目。

vue create my-project

安装依赖

接下来，你需要安装一些必要的依赖。

npm install vue-router vuex

创建组件

接下来，你需要创建一个组件来实现九宫格抽奖的功能。你可以创建一个名为 Lottery.vue 的组件。

<template>
  <div>
    <div class="lottery-container">
      <div class="lottery-item" v-for="item in items" :key="item.id">
        <img :src="item.image" alt="">
        <p>{{ item.name }}</p>
      </div>
    </div>
    <button @click="draw">抽奖</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Lottery',
  data() {
    return {
      items: [
        { id: 1, image: 'item1.jpg', name: '奖品1' },
        { id: 2, image: 'item2.jpg', name: '奖品2' },
        { id: 3, image: 'item3.jpg', name: '奖品3' },
        { id: 4, image: 'item4.jpg', name: '奖品4' },
        { id: 5, image: 'item5.jpg', name: '奖品5' },
        { id: 6, image: 'item6.jpg', name: '奖品6' },
        { id: 7, image: 'item7.jpg', name: '奖品7' },
        { id: 8, image: 'item8.jpg', name: '奖品8' },
        { id: 9, image: 'item9.jpg', name: '奖品9' }
      ]
    }
  },
  computed: {
    ...mapState(['winningItem'])
  },
  methods: {
    ...mapActions(['draw']),
    draw() {
      this.draw()
    }
  }
}
</script>

<style>
.lottery-container {
  display: flex;
  flex-wrap: wrap;
}

.lottery-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid #ccc;
  text-align: center;
}

.lottery-item img {
  width: 100%;
  height: 100%;
}

.lottery-item p {
  margin-top: 5px;
}
</style>

创建路由

接下来，你需要创建一个路由来将 Lottery 组件映射到一个 URL。你可以创建一个名为 Lottery.vue 的路由。

{
  path: '/lottery',
  component: Lottery
}

创建 Store

接下来，你需要创建一个 Store 来管理九宫格抽奖的状态。你可以创建一个名为 store.js 的 Store。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    winningItem: null
  },
  mutations: {
    setWinningItem(state, item) {
      state.winningItem = item
    }
  },
  actions: {
    draw({ commit }) {
      // 随机抽取一个奖品
      const item = items[Math.floor(Math.random() * items.length)]

      // 提交中奖的奖品
      commit('setWinningItem', item)
    }
  }
})

export default store

注册组件和 Store

接下来，你需要在 main.js 文件中注册 Lottery 组件和 Store。

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.component('Lottery', Lottery)

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')