vue3.0 抽奖小功能

最新推荐文章于 2024-11-28 10:32:14 发布

撑戌圆爱痒生

最新推荐文章于 2024-11-28 10:32:14 发布

阅读量497

点赞数

分类专栏： vue3.0 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/moqi_77/article/details/118362631

版权

本文详细介绍了如何在Vue3.0框架中实现一个抽奖小功能，包括组件设计、状态管理、动画实现等关键步骤，帮助开发者了解Vue3的新特性在实际项目中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3.0 抽奖小功能

我给写进组件了

<template>
	<div id="toll">
		<div class="lottery-box">
			<div class="lottery">
				<div class="lottery-item">
					<div class="lottery-start">
						<div class="box gray" v-if="isStart===0">
							<p>活动未开始</p>
						</div>
						<div class="box" @click="startLottery" v-if="isStart===1">
							<p><b>点击</b></p>
							<p><b>抽奖</b></p>
						</div>
						<div class="box gray" v-if="isStart===2">
							<p>活动已过期</p>
						</div>
					</div>
					<ul>
						<li v-for="(item,i) in arra" :class="i==index?'on':''">
							<div class="box">
								<p><img src="../assets/奖品.png" v-show="item.status==1&&item.img==null"></p>
								<p><img src="../assets/谢谢参与.png" v-show="item.status==0&&item.img==null"></p>
								<p><img :src="item.img" v-show="item.img!=null"></p>
								<p>{
   {
   item.name}}</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- 中奖弹窗 -->
			<div class="mask" v-if="showToast"></div>
			<div class="lottery-alert" v-if="showToast">
				<h1 v-if="arra[index].name!=='谢谢参与'">恭喜您</h1>
				<p>
					<img v-if="arra[index].name!=='谢谢参与'" src="../assets/奖品.png" alt="">
					<img v-if="arra[index].name==='谢谢参与'" src="../assets/谢谢参与.png" alt="">
				</p>
				<h2 v-if="arra[index].name!=='谢谢参与'">获得{
   {
   arra[index].name}}</h2>
				<h2 v-if="arra[index].name=='谢谢参与'">{
   {
   arra[index].name}}</h2>
				<div class="btnsave" @click="showToast=false">确定</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
   
		ref,
		watch,
	} from 'vue'
	export default {