简要说明网站建设的步骤,健康生活网站开发系统背景,小门户网站模板,建设银行河北省分行官方网站文章目录 ⭐前言⭐设计布局⭐交互设计⭐整体代码⭐insicode代码 ⭐总结⭐结束 ⭐前言
大家好#xff0c;我是yma16#xff0c;本文分享关于前端 vitevue3——写一个抽奖随机组件。 vue3系列相关文章#xff1a; 前端vue2、vue3去掉url路由“ # ”号——nginx配置 csdn新星计… 文章目录 ⭐前言⭐设计布局⭐交互设计⭐整体代码⭐insicode代码 ⭐总结⭐结束 ⭐前言
大家好我是yma16本文分享关于前端 vitevue3——写一个抽奖随机组件。 vue3系列相关文章 前端vue2、vue3去掉url路由“ # ”号——nginx配置 csdn新星计划vue3tsantd赛道——利用inscode搭建vue3(ts)antd前端模板 认识vite_vue3 初始化项目到打包 python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
vue3 Vue3是Vue.js框架的下一个主要版本。Vue3的目标是提高性能增强可维护性和可扩展性并提供更好的TypeScript支持。
以下是Vue3的一些主要特点 性能提升Vue3可以在运行时进行优化从而实现更快的渲染速度和更小的文件大小。 更好的TypeScript支持Vue3的API和内部结构已更新从而更好地支持TypeScript类型检查。 Composition APIVue3的Composition API通过提供更灵活的组件逻辑组织方式来改进代码重用性和可维护性。 更好的可扩展性Vue3的内部结构已更新从而更好地支持插件和第三方库。 更好的开发体验Vue3提供了更好的开发工具和调试工具从而提高了开发效率和质量。
总之Vue3是一个更加灵活、高效和易于使用的Vue框架版本它将成为Vue.js社区中的重要组成部分。 抽奖效果
⭐设计布局
结构上中下结构 上方显示 用户头像列表 中奖 显示抽奖过程中的用户头像 下方显示 开始抽奖按钮
结束抽奖时弹出弹框 布局代码
templatediv!-- 抽奖用户 列表 --div v-foritem in state.list :keyitem.id styledisplay: inline-block;padding:20pxdiv styledisplay: inline-block;text-align: center;div{{ item.name }}/divdiva-avatar :size{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }template #iconimg :srcitem.img/template/a-avatar/div/div/div!-- 抽奖用户 随机旋转的用户--!-- 0.5s 游戏开始不断轮播用户头像 --div styledisplay: flex;justify-content: center;align-items: center;margin-top:50pxv-ifstate.gameStatus ! initdiv styledisplay: inline-block;text-align: center;a-card hoverable stylewidth: 240pxtemplate #coverimg :srcstate.currentPerson?.img/templatea-card-meta :titlestate.currentPerson?.nametemplate #description抽奖中 角色id:{{ state.currentPerson?.id }} /template/a-card-meta/a-card/div/div!-- 中奖结束弹框 --a-modal v-model:openstate.openModal title恭喜你中奖 :footernull afterCloseafterCloseModalp中奖用户名称{{ state.currentPerson?.name }}/pp中奖用户id{{ state.currentPerson?.id }}/ppimg :srcstate.currentPerson?.img/p/a-modal!-- 开始游戏按钮 --div styleposition:absolute;bottom:50px;text-align: center;width:100%a-button typeprimary clickstartGameBtn v-ifstate.gameStatus init开始抽奖/a-buttona-button typeprimary disabled v-ifstate.gameStatus run进行中/a-buttona-button typeprimary clickrestartGameBtn v-ifstate.gameStatus end重新开始/a-button/div/div
/template显示效果
⭐交互设计
交互开始抽奖时 倒计时随机挑选用 思路分解
倒计时函数实现随机用户取出的实现抽奖状态定义 init 初始化 run 运行中 end 结束 用户数据结构包括
id 用户idname 用户名称im 用户头像图片 具体实现
倒计时实现
// 延时 delay
const sleep (delay) new Promise((resolve) setTimeout(resolve, delay))获取区间数实现 [min,max] const max state.list.length - 1;const min 0;const randomIndex Math.floor(Math.random() * (max - min)) min;整体js逻辑
script setup
import { reactive, onMounted } from vueconst state reactive({list: [],currentPerson: {name: ,img: ,id: },gameStatus: init,// init 初始化 状态 run 运行 状态 end 结束状态count: 100,displayCount: 0,openModal: false
})// mock 用户数据
const mockUserData (n) {let data []for (let i 0; i n; i) {data.push({img: https://source.unsplash.com/random/200x14${i},// 随机头像name: 角色 i,id: i})}state.list dataconsole.log(state.list)
}// 延时 delay
const sleep (delay) new Promise((resolve) setTimeout(resolve, delay))// 开始抽奖
const startGameBtn async () {let n state.countwhile (n--) {state.displayCount nawait sleep(20)const max state.list.length - 1;const min 0;const randomIndex Math.floor(Math.random() * (max - min)) min;state.currentPerson state.list[randomIndex]console.log(randomIndex, randomIndex)console.log(state.currentPerson, state.currentPerson)state.gameStatus run}state.gameStatus endstate.openModal true
}const afterCloseModal () {state.openModal false
}// 重新开始抽奖
const restartGameBtn () {startGameBtn()
}
onMounted(() {mockUserData(10)
})
/script⭐整体代码
模拟抽奖的整体vue代码块
templatediv!-- 抽奖用户 列表 --div v-foritem in state.list :keyitem.id styledisplay: inline-block;padding:20pxdiv styledisplay: inline-block;text-align: center;div{{ item.name }}/divdiva-avatar :size{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }template #iconimg :srcitem.img/template/a-avatar/div/div/div!-- 抽奖用户 随机旋转的用户--!-- 0.5s 游戏开始不断轮播用户头像 --div styledisplay: flex;justify-content: center;align-items: center;margin-top:50pxv-ifstate.gameStatus ! initdiv styledisplay: inline-block;text-align: center;a-card hoverable stylewidth: 240pxtemplate #coverimg :srcstate.currentPerson?.img/templatea-card-meta :titlestate.currentPerson?.nametemplate #description抽奖中 角色id:{{ state.currentPerson?.id }} /template/a-card-meta/a-card/div/div!-- 中奖结束弹框 --a-modal v-model:openstate.openModal title恭喜你中奖 :footernull afterCloseafterCloseModalp中奖用户名称{{ state.currentPerson?.name }}/pp中奖用户id{{ state.currentPerson?.id }}/ppimg :srcstate.currentPerson?.img/p/a-modal!-- 开始游戏按钮 --div styleposition:absolute;bottom:50px;text-align: center;width:100%a-button typeprimary clickstartGameBtn v-ifstate.gameStatus init开始抽奖/a-buttona-button typeprimary disabled v-ifstate.gameStatus run进行中/a-buttona-button typeprimary clickrestartGameBtn v-ifstate.gameStatus end重新开始/a-button/div/div
/templatescript setup
import { reactive, onMounted } from vueconst state reactive({list: [],currentPerson: {name: ,img: ,id: },gameStatus: init,// init 初始化 状态 run 运行 状态 end 结束状态count: 100,displayCount: 0,openModal: false
})// mock 用户数据
const mockUserData (n) {let data []for (let i 0; i n; i) {data.push({img: https://source.unsplash.com/random/200x14${i},// 随机头像name: 角色 i,id: i})}state.list dataconsole.log(state.list)
}// 延时 delay
const sleep (delay) new Promise((resolve) setTimeout(resolve, delay))// 开始抽奖
const startGameBtn async () {let n state.countwhile (n--) {state.displayCount nawait sleep(20)const max state.list.length - 1;const min 0;const randomIndex Math.floor(Math.random() * (max - min)) min;state.currentPerson state.list[randomIndex]console.log(randomIndex, randomIndex)console.log(state.currentPerson, state.currentPerson)state.gameStatus run}state.gameStatus endstate.openModal true
}const afterCloseModal () {state.openModal false
}// 重新开始抽奖
const restartGameBtn () {startGameBtn()
}
onMounted(() {mockUserData(10)
})
/script效果
⭐insicode代码
代码整合在获取质量分的vue3项目中 ⭐总结
在实现抽奖之前先模拟过程然后再开始设计思路
模拟过程重要性 模拟过程是指用计算机程序对某一现实系统进行描述和模拟以预测系统的行为和未来发展趋势。模拟过程在科研、工程设计、产品开发、政策制定等领域中都有重要的应用。
以下是模拟过程的重要性 预测系统的行为通过模拟过程可以预测系统的行为和未来发展趋势帮助人们更好地理解系统和作出决策。 优化系统设计模拟过程可以帮助设计师更加深入地了解系统的特点和工作原理发现设计中可能存在的问题并进行优化和改进。 节约成本和时间模拟过程可以代替实际试验有效节约成本和时间提高研发效率和成果质量。 探索未知领域模拟过程可以在未知领域中进行探索和研究提高人类对自然和社会现象的认识推动科学技术进步。 风险评估和决策支持通过模拟过程可以对可能的风险和问题进行评估和预测帮助决策者制定更加科学合理的决策和政策。
综上所述模拟过程在众多领域中都具有重要的应用可以帮助我们更好地认识和理解现实系统提高工作效率和成果质量推动社会和科技的进步。
⭐结束
本文分享到这结束如有错误或者不足之处欢迎指出 点赞是我创作的动力 ⭐️ 收藏是我努力的方向 ✏️ 评论是我进步的财富 感谢你的阅读
