【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖总结
大家好!先上图看看本次案例的整体效果。
完整版实战课程附源码:【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖
实现思路:
- Vue component实现老虎-机组件,可以嵌套到任意要使用的页面。
- css3 transform控制老虎-机抽奖过程的动画效果。
- 抽奖组件内使用钩子函数watch监听抽奖结果的返回情况播放老虎-机动画并给用户弹出中奖提示。
- 中奖结果弹窗,为抽奖组件服务。
实现步骤如下:
- 构建api奖品配置信息和抽奖接口,vuex全局存放奖品配置和中奖结果数据信息。
api:export default {
getPrizeList () {
let prizeList = [
{
id: 1,
name: '小米8',
img: 'https://i1.mifile.cn/f/i/g/2015/cn-index/m8-140.png'
},
{
id: 2,
name: '小米电视',
img: 'https://i1.mifile.cn/f/i/g/2015/TV4A-43QC.png'
}, {
id: 3,
name: '小米平衡车',
img: 'https://i1.mifile.cn/f/i/g/2015/cn-index/scooter-140!140x140.jpg'
}, {
id: 4,
name: '小米耳机',
img: 'https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140x140.jpg'
}
]
return prizeList
},
lottery () {
return {
id: 4,
name: '小米耳机',
img: 'https://c1.mifile.cn/f/i/g/2015/video/pinpai140!140x140.jpg'
}
}
}store:
import lotteryApi from '../../api/lottery.api.js' const state = {
prizeList: [],
lotteryResult: {}
} const getters = {
prizeList: state => state.prizeList,
lotteryResult: state => state.lotteryResult
} const mutations = {
SetPrizeList (state, { prizeList }) {
state.prizeList = prizeList
},
SetLotteryResult (state, { lotteryResult }) {
state.lotteryResult = lotteryResult
}
} const actions = {
getPrizeList ({ commit }) {
let result = lotteryApi.getPrizeList()
commit('SetPrizeList', { prizeList: result })
},
lottery ({ commit }) {
let result = lotteryApi.lottery()
commit('SetLotteryResult', { lotteryResult: result })
}
} export default {
state,
getters,
mutations,
actions,
namespaced: true
} - 编写抽奖组件,为保证通用性,组件只负责播放抽奖结果。接收两个数据和一个方法,如下:
数据一:预置的奖品列表数据(轮播奖品需要)
数据二:抽奖结果,播放抽奖动画和弹出中奖结果需要
方法:抽奖动作,返回的抽奖结果数据即为数据二,响应式传递给组件
大概代码思路如下(仅供参考,不可运行)<template>
<section>
<div class="main">
<!-- 老虎-机 -->
<div class="recreation">
<div class="recreation-list clearfix" v-if="slotPrizes.length>0">
<ul class="recreation-item" v-bind:style="{transform: 'translateY('+y1+'rem)'}">
<li class="recreation-prices" v-for="(item,index) in slotPrizes" v-bind:key="index">
<img v-bind:src="item.img" alt>
</li>
</ul>
<ul class="recreation-item" v-bind:style="{transform: 'translateY('+y2+'rem)'}">
<li class="recreation-prices" v-for="(item,index) in slotPrizes" v-bind:key="index">
<img v-bind:src="item.img" alt>
</li>
</ul>
<ul class="recreation-item" v-bind:style="{transform: 'translateY('+y3+'rem)'}">
<li class="recreation-prices" v-for="(item,index) in slotPrizes" v-bind:key="index">
<img v-bind:src="item.img" alt>
</li>
</ul>
</div>
<a
href="javascript:;"
@click="parentEmitLottery"
class="btn-recreation"
></a>
</div>
<prize-pop :prize="lotteryResult" v-if="showPrize" @closeLotteryPop="showPrize=false"/>
</div>
</section>
</template>
<script>
import PrizePop from './common/prize-pop.vue'
export default {
name: 'SlotMachine',
data () {
return {
}
},
components: {
PrizePop
},
props: {
prizeList: {
type: Array,
default: () => []
},
lotteryResult: {
type: Object,
default: () => {}
}
},
computed: {
slotPrizes () {
let prizes = []
if (this.prizeList.length > 0) {
Object.assign(prizes, this.prizeList)
prizes.push(this.prizeList[0])
}
return prizes
}
},
methods: {
/**
* 触发父页面调用抽奖
*/
parentEmitLottery () {
this.$emit('lottery')
},
/**
* 开始抽奖
*/
startLottery () {
},
/**
* 获取中奖结果所在奖品列表中的索引,以确定抽奖动画最终落在哪个奖品
*/
getPrizeIndex () {
},
/**
* 执行抽奖动画
*/
startPlay (index1, index2, index3) {
}
},
watch: {
/**
* 监听抽奖结果,一旦有中奖信息就开始执行抽奖动画
*/
lotteryResult (newVal, oldVal) {
if (newVal.id && newVal.id > 0) {
this.startLottery()
}
}
}
}
</script> - 弹出中奖结果组件,依附于抽奖组件,在上一步的执行抽奖结果动画结束后执行。
<template>
<div class="subject-pop" style="z-index: 10;" v-if="prize.id>0">
<div class="subject-pop-mask"></div>
<div class="subject-pop-box">
<h3>恭喜您</h3>
<p>
<img :src="prize.img" alt>
</p>
<h4>获得
<span></span>
<span>{{prize.name}}</span>
</h4>
<div class="subject-pop-footer">
<a href="javascript:;" class="november-btn1" @click="closeLotteryEmit">知道了</a>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
prize: {
type: Object,
default: () => {
return {
id: 0
}
}
}
},
methods: {
closeLotteryEmit () {
this.$emit('closeLotteryPop')
}
}
}
</script> - 抽奖组件运用在需要使用的页面中,此页面需要为抽奖组件提前准备好预置奖品列表和中奖结果信息,并提供好抽奖方法供子组件(抽奖组件)触发,触发完更改抽奖结果响应式传入到抽奖组件中。
<template>
<section>
<div style="width:100%;text-align:center;margin:2rem 0;">您有一次抽奖机会,祝君好运~~~</div>
<slotMachine :prizeList="prizeList" :lotteryResult="lotteryResult" @lottery="lottery"/>
</section>
</template> <script>
import { mapGetters, mapActions } from 'vuex'
import slotMachine from '@/components/slotMachine'
export default {
created () {
this.getPrizeList()
},
components: {
slotMachine
},
computed: {
...mapGetters({
prizeList: 'lottery/prizeList',
lotteryResult: 'lottery/lotteryResult'
})
},
methods: {
...mapActions({
getPrizeList: 'lottery/getPrizeList',
lottery: 'lottery/lottery'
})
}
}
</script>
以上就是老虎-机抽奖核心步骤的整体思路,欢迎讨论。
完整版实战课程附源码:【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖
Vue.js实战之游戏抽奖系列全集
↓↓↓↓↓↓↓↓↓↓↓
【Vue.js实战案例】- Vue.js实现老虎-机抽奖总结
【Vue.js实战案例】- Vue.js实现九宫格水果机抽奖游戏总结
【Vue.js实战案例】- Vue.js实现大转盘抽奖总结
【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖总结的更多相关文章
- 【Vue.js游戏机实战】- Vue.js实现九宫格水果机抽奖游戏总结
大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现九宫格水果机抽奖 实现思路: Vue component实现九宫格水果机组件,可以嵌套到任意 ...
- 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结
大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...
- js 大转盘,老虎 机
http://www.helloweba.com/view-blog-215.htmlhttp://www.ui3g.com/demos/show/1408/http://www.js-css.cn ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- 08Vue.js快速入门-Vue综合实战项目
8.1. 前置知识学习 npm 学习 官方文档 推荐资料 npm入门 npm介绍 需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 ...
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
- 第10章-Vue.js 项目实战
一.本节内容 掌握项目环境中路由的配置方法 ***** 熟练掌握编写单文件组件的编写 *** 能够使用swiper.js进行轮播图组件的封装 能够使用axios进行数据请求 二.webpack项目的目 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页+指令(一)
缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...
随机推荐
- Flask初识之安装及HelloWord程序
Python 现阶段三大主流Web框架 Django Tornado Flask 对比 1.Django 主要特点是大而全,集成了很多组件,例如: Models Admin Form 等等, 不管你用 ...
- with读、写文件
1.with写文件 save_file = "1.txt" str_data = "123a\nbc" with open(save_file, 'a', en ...
- linux防火墙开放端口,针对固定ip开放端口
编辑/etc/sysconfig/iptables,添加 -A INPUT -m state --state NEW -m tcp -p tcp -s 127.0.0.1 --dport 6379 - ...
- java对象序列化和反序列化,redis存入和获取对象
最近使用redis发现直接存储序列化后的对象更方便,现提供java序列化和反序列化的代码 1.序列化代码: public static byte[] serialize(Object object) ...
- OSI标准协议分析
1.各个层的作用 物理层:(physical Layer):物理层负责传送比特(Bit),涉及到接口和传输媒体的机械 电气特性 数据链路层:(data link layer):数据链路层负责传送的帧( ...
- 【HCIA Gauss】学习汇总-数据库管理(数据库基本概念)-3
数据库:操作系统文件或磁盘数据块的集合数据库实例: 指操作系统中一系列进程以及为这些进程分配的内存块 通常来说一个数据库实例对应着一个数据库[数据库实例是访问数据的通道] 多实例:利用多实例 可以充分 ...
- js HTTP 下载 处理 api 请求 返回数据流
axios({ method: 'post', url: 'url....', data:{}, timeout: 1000*60, responseType: 'blob',// 此选项必须设置 否 ...
- dll与exe
文章:dll与exe的区别 地址:https://blog.csdn.net/qq_26591517/article/details/80389846
- python __main__ 里的变量是全局变量 因此在函数里面可以访问到
__main__ and scoping in python from:https://stackoverflow.com/questions/4775579/main-and-scoping-in- ...
- JS+rem,移动端适配
window.onresize = function () { setHtmlFz(); } setHtmlFz(); function setHtmlFz() { // 基础值 var baseVa ...