前端 vite+vue3——写一个随机抽奖组件

news2024/9/25 15:23:58

文章目录

    • ⭐前言
    • ⭐设计布局
    • ⭐交互设计
    • ⭐整体代码
      • ⭐insicode代码
    • ⭐总结
    • ⭐结束

yma16-logo

⭐前言

大家好，我是yma16，本文分享关于前端 vite+vue3——写一个抽奖随机组件。
vue3系列相关文章：
前端vue2、vue3去掉url路由“ # ”号——nginx配置
csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板
认识vite_vue3 初始化项目到打包
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示

vue3
Vue3是Vue.js框架的下一个主要版本。Vue3的目标是提高性能，增强可维护性和可扩展性，并提供更好的TypeScript支持。

以下是Vue3的一些主要特点：

  1. 性能提升：Vue3可以在运行时进行优化，从而实现更快的渲染速度和更小的文件大小。

  2. 更好的TypeScript支持：Vue3的API和内部结构已更新，从而更好地支持TypeScript类型检查。

  3. Composition API：Vue3的Composition API通过提供更灵活的组件逻辑组织方式来改进代码重用性和可维护性。

  4. 更好的可扩展性：Vue3的内部结构已更新，从而更好地支持插件和第三方库。

  5. 更好的开发体验：Vue3提供了更好的开发工具和调试工具，从而提高了开发效率和质量。

总之，Vue3是一个更加灵活、高效和易于使用的Vue框架版本，它将成为Vue.js社区中的重要组成部分。
抽奖效果
draw

⭐设计布局

结构：上中下结构
上方显示 用户头像列表
中奖 显示抽奖过程中的用户头像
下方显示 开始抽奖按钮

结束抽奖时，弹出弹框
布局代码

<template>
    <div>
        <!-- 抽奖用户 列表 -->
        <div v-for="item in state.list" :key="item.id" style="display: inline-block;padding:20px">
            <div style="display: inline-block;text-align: center;">
                <div>
                    {{ item.name }}
                </div>
                <div>
                    <a-avatar :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }">
                        <template #icon>
                            <img :src="item.img">
                        </template>
                    </a-avatar>
                </div>
            </div>
        </div>
        <!-- 抽奖用户 随机旋转的用户-->
        <!-- 0.5s 游戏开始不断轮播用户头像  -->
        <div style="display: flex;justify-content: center;align-items: center;margin-top:50px"
            v-if="state.gameStatus !== 'init'">
            <div style="display: inline-block;text-align: center;">

                <a-card hoverable style="width: 240px">
                    <template #cover>
                        <img :src="state.currentPerson?.img">
                    </template>
                    <a-card-meta :title="state.currentPerson?.name">
                        <template #description>抽奖中 角色id:{{ state.currentPerson?.id }} </template>
                    </a-card-meta>
                </a-card>

            </div>
        </div>
        <!-- 中奖结束弹框 -->
        <a-modal v-model:open="state.openModal" title="恭喜你中奖" :footer="null" @afterClose="afterCloseModal">
            <p>中奖用户名称：{{ state.currentPerson?.name }}</p>
            <p>中奖用户id：{{ state.currentPerson?.id }}</p>
            <p><img :src="state.currentPerson?.img"></p>
        </a-modal>

        <!-- 开始游戏按钮 -->
        <div style="position:absolute;bottom:50px;text-align: center;width:100%">
            <a-button type="primary" @click="startGameBtn" v-if="state.gameStatus === 'init'">开始抽奖</a-button>
            <a-button type="primary" disabled v-if="state.gameStatus === 'run'">进行中</a-button>
            <a-button type="primary" @click="restartGameBtn" v-if="state.gameStatus === 'end'">重新开始</a-button>
        </div>
    </div>
</template>

显示效果：
dispaly-person

⭐交互设计

交互：开始抽奖时 倒计时随机挑选用
思路分解：

  1. 倒计时函数实现
  2. 随机用户取出的实现
  3. 抽奖状态定义： init 初始化 run 运行中 end 结束
    用户数据结构包括
  • id 用户id
  • name 用户名称
  • 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 'vue'

const 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 = data
    console.log(state.list)
}

// 延时 delay
const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

// 开始抽奖
const startGameBtn = async () => {

    let n = state.count
    while (n--) {
        state.displayCount = n
        await 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 = 'end'
    state.openModal = true
}

const afterCloseModal = () => {
    state.openModal = false
}


// 重新开始抽奖
const restartGameBtn = () => {
    startGameBtn()
}
onMounted(() => {
    mockUserData(10)
})
</script>

⭐整体代码

模拟抽奖的整体vue代码块

<template>
    <div>
        <!-- 抽奖用户 列表 -->
        <div v-for="item in state.list" :key="item.id" style="display: inline-block;padding:20px">
            <div style="display: inline-block;text-align: center;">
                <div>
                    {{ item.name }}
                </div>
                <div>
                    <a-avatar :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }">
                        <template #icon>
                            <img :src="item.img">
                        </template>
                    </a-avatar>
                </div>
            </div>
        </div>
        <!-- 抽奖用户 随机旋转的用户-->
        <!-- 0.5s 游戏开始不断轮播用户头像  -->
        <div style="display: flex;justify-content: center;align-items: center;margin-top:50px"
            v-if="state.gameStatus !== 'init'">
            <div style="display: inline-block;text-align: center;">

                <a-card hoverable style="width: 240px">
                    <template #cover>
                        <img :src="state.currentPerson?.img">
                    </template>
                    <a-card-meta :title="state.currentPerson?.name">
                        <template #description>抽奖中 角色id:{{ state.currentPerson?.id }} </template>
                    </a-card-meta>
                </a-card>

            </div>
        </div>
        <!-- 中奖结束弹框 -->
        <a-modal v-model:open="state.openModal" title="恭喜你中奖" :footer="null" @afterClose="afterCloseModal">
            <p>中奖用户名称：{{ state.currentPerson?.name }}</p>
            <p>中奖用户id：{{ state.currentPerson?.id }}</p>
            <p><img :src="state.currentPerson?.img"></p>
        </a-modal>

        <!-- 开始游戏按钮 -->
        <div style="position:absolute;bottom:50px;text-align: center;width:100%">
            <a-button type="primary" @click="startGameBtn" v-if="state.gameStatus === 'init'">开始抽奖</a-button>
            <a-button type="primary" disabled v-if="state.gameStatus === 'run'">进行中</a-button>
            <a-button type="primary" @click="restartGameBtn" v-if="state.gameStatus === 'end'">重新开始</a-button>
        </div>


    </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'

const 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 = data
    console.log(state.list)
}

// 延时 delay
const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

// 开始抽奖
const startGameBtn = async () => {

    let n = state.count
    while (n--) {
        state.displayCount = n
        await 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 = 'end'
    state.openModal = true
}

const afterCloseModal = () => {
    state.openModal = false
}

// 重新开始抽奖
const restartGameBtn = () => {
    startGameBtn()
}
onMounted(() => {
    mockUserData(10)
})
</script>

效果：
draw

⭐insicode代码

代码整合在获取质量分的vue3项目中

⭐总结

在实现抽奖之前先模拟过程然后再开始设计思路

模拟过程重要性
模拟过程是指用计算机程序对某一现实系统进行描述和模拟，以预测系统的行为和未来发展趋势。模拟过程在科研、工程设计、产品开发、政策制定等领域中都有重要的应用。

以下是模拟过程的重要性：

  1. 预测系统的行为：通过模拟过程，可以预测系统的行为和未来发展趋势，帮助人们更好地理解系统和作出决策。

  2. 优化系统设计：模拟过程可以帮助设计师更加深入地了解系统的特点和工作原理，发现设计中可能存在的问题，并进行优化和改进。

  3. 节约成本和时间：模拟过程可以代替实际试验，有效节约成本和时间，提高研发效率和成果质量。

  4. 探索未知领域：模拟过程可以在未知领域中进行探索和研究，提高人类对自然和社会现象的认识，推动科学技术进步。

  5. 风险评估和决策支持：通过模拟过程，可以对可能的风险和问题进行评估和预测，帮助决策者制定更加科学合理的决策和政策。

综上所述，模拟过程在众多领域中都具有重要的应用，可以帮助我们更好地认识和理解现实系统，提高工作效率和成果质量，推动社会和科技的进步。

⭐结束

本文分享到这结束，如有错误或者不足之处欢迎指出！
scene

👍 点赞，是我创作的动力！
⭐️ 收藏，是我努力的方向！
✏️ 评论，是我进步的财富！
💖 感谢你的阅读！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1079061.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

FHRP首跳冗余的解析

FHRP首跳冗余的解析

首跳冗余的解析 个人简介 HSRP hot standby router protocol 热备份路由协议 思科设备上 HSRP VRRP 华为设备上 VRRP HSRP v1 version 1 HSRP v2 version 2 虚拟一个HSRP虚拟IP地址 192.168.1.1 开启HSRP的抢占功能 通过其他参数 人为调整谁是主 谁是从 &a…
阅读更多...
入门C++程序员需要怎么下手？

入门C++程序员需要怎么下手？

前言 众所周知&#xff0c;C是一种非常流行的编程语言&#xff0c;它广泛应用于计算机科学和软件开发中&#xff0c;无论是计算机专业的学生还是自学编程的程序员&#xff0c;学习C都是一个必备的技能。那么&#xff0c;如果想成为一名C程序员&#xff0c;学习C需要多久才能入门…
阅读更多...
Vuex获取、修改参数值及异步数据处理

Vuex获取、修改参数值及异步数据处理

14天阅读挑战赛 学不可以已... 目录 一、Vuex简介 1.1 vuex介绍 1.2 vuex核心 二、Vuex使用 2.1 Vuex安装 2.2 创建store模块 2.3 创建vuex的store实例并注册上面引入的各大模块 三、使用Vuex获取、修改值案例 3.1 创建两个菜单组件 3.2 配置路由 3.3 模拟菜单数据 …
阅读更多...
设计模式 - 行为型模式考点篇：迭代器模式（概述 | 案例实现 | 优缺点 | 使用场景）

设计模式 - 行为型模式考点篇：迭代器模式（概述 | 案例实现 | 优缺点 | 使用场景）

目录 一、行为型模式 一句话概括行为型模式 1.1、迭代器模式 1.1.1、概述 1.1.2、案例实现 1.1.3、优缺点 1.1.4、使用场景 一、行为型模式 一句话概括行为型模式 行为型模式&#xff1a;类或对象间如何交互、如何划分职责&#xff0c;从而更好的完成任务. 1.1、迭代器…
阅读更多...
ruoyi 若依 前端vue npm install 运行vue前端

ruoyi 若依 前端vue npm install 运行vue前端

首次导入&#xff0c;需要先执行 npm install #进入到前端模块目录下 cd ruoyi-ui # 安装 npm install 启动后端项目 运行前端项目&#xff1a;运行成功后&#xff0c;会浏览器自动加载到前端首页&#xff08;或者 浏览器访问打印的两个地址&#xff09; # 运行 npm run dev 部…
阅读更多...
[sqoop]hive导入mysql,其中mysql的列存在默认值列

[sqoop]hive导入mysql,其中mysql的列存在默认值列

一、思路 直接在hive表中去掉有默认值的了列&#xff0c;在sqoop导入时,指定非默认值列即可&#xff0c; 二、具体 mysql的表 hive的表 create table dwd.dwd_hk_rcp_literature(id string,literature_no string,authors string,article_title string,source_title string…
阅读更多...
【MySql】6- 实践篇(四)

【MySql】6- 实践篇(四)

文章目录 1. 为何SQL语句逻辑相同&#xff0c;性能却差异巨大1.1 性能差异大的SQL语句问题1.1.1 案例一:条件字段函数操作1.1.2 案例二:隐式类型转换1.1.3 案例三:隐式字符编码转换 2. 为何只查询一行的SQL执行很慢2.1 场景一:查询长时间不返回2.1.1 等MDL锁2.1.2 等 flush2.1.…
阅读更多...
vscode远程ssh服务器且更改服务器别名

vscode远程ssh服务器且更改服务器别名

目录 1、打开VS Code并确保已安装"Remote - SSH"扩展。如果尚未安装&#xff0c;请在扩展市场中搜索并安装它。 2、单击左下角的"Remote Explorer"图标&#xff0c;打开远程资源管理器。 3、在远程资源管理器中&#xff0c;单击右上角的齿轮图标&#x…
阅读更多...
区块链在游戏行业的应用

区块链在游戏行业的应用

区块链技术在游戏行业有许多潜在的应用&#xff0c;它可以改变游戏开发、发行和玩家交互的方式。以下是区块链技术在游戏行业的一些主要应用&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.游戏资产…
阅读更多...
《Node.js 学习笔记 之 切换node版本》

《Node.js 学习笔记 之 切换node版本》

目录 Node.js 学习笔记nvm第一步安装 nvm 常用命令遇到的问题 Node.js 学习笔记 个人博客地址&#xff1a; 使用npm 命令经常遇到npm 与node.js 版本不兼容报错的情况&#xff0c;下面通过nvm 版本管理工具解决问题 nvm node.js version management 通过它可以安装和切换不同版…
阅读更多...
『Linux』GDB调试

『Linux』GDB调试

前言 GDB 是由 GNU 软件系统社区提供的调试工具&#xff0c;同 GCC 配套组成了一套完整的开发环境&#xff0c;GDB 是 Linux 和许多类 Unix 系统中的标准开发环境。 一般来说&#xff0c;GDB 主要完成下面四个方面的功能&#xff1a; 启动程序&#xff1a;可以按照自定义的要求…
阅读更多...
Unity布料系统Cloth

Unity布料系统Cloth

Unity布料系统Cloth 介绍布料系统Cloth(Unity组件)组件上的一些属性布料系统的使用布料约束Select面板Paint面板Gradient Tool面板 布料碰撞布料碰撞碰撞适用 介绍 布料系统我第一次用是做人物的裙摆自然飘动&#xff0c;当时我用的是UnityChan这个unity官方自带的插件做的裙摆…
阅读更多...
【计算机网络笔记】什么是网路协议？

【计算机网络笔记】什么是网路协议？

为什么要有网路协议&#xff1f;什么是网络协议&#xff1f;总结感谢 &#x1f496; 本篇文章总字数&#xff1a;1027字 预计阅读时间&#xff1a;3~7min 建议收藏之后慢慢阅读 为什么要有网路协议&#xff1f; 硬件&#xff08;主机、路由器、通信链 路等&#xff09;只是计…
阅读更多...
FPGA project ： flash_erasure

FPGA project ： flash_erasure

SPI是什么&#xff1a; SPI&#xff08;Serial Peripheral Interface&#xff0c;串行外围设备接口&#xff09;通讯协议&#xff0c;是Motorola公司提出的一种同步串行接口技术&#xff0c;是一种高速、全双工、同步通信总线&#xff0c;在芯片中只占用四根管脚用来控制及数据…
阅读更多...
k8s使用

k8s使用

一、Kubernetes好处 ​ kubernetes&#xff0c;是一个全新的基于容器技术的分布式架构领先方案&#xff0c;是谷歌严格保密十几年的秘密武器----Borg系统的一个开源版本&#xff0c;于2014年9月发布第一个版本&#xff0c;2015年7月发布第一个正式版本。 ​ kubernetes的本质…
阅读更多...
docker 安装oracle

docker 安装oracle

拉取镜像 拉取oracle_11g镜像 拉取oracle镜像(oracle 11.0.2 64bit 企业版 实例名: helowin) Oracle主要在Docker基础上安装&#xff0c;安装环境注意空间和内存&#xff0c;Oracle是一个非常庞大的一个软件&#xff0c; 建议使用网易镜像或阿里镜像网站这里以oracle 11.0.2…
阅读更多...
XPath在数据采集中的应用：从XML和HTML中提取数据

XPath在数据采集中的应用：从XML和HTML中提取数据

目录 一、XPath简介 二、XPath的语法 三、XPath在数据采集中的应用 四、XPath和其他数据格式 总结 在当今的数据驱动时代&#xff0c;从各种数据源中提取有用的信息变得至关重要。其中&#xff0c;XML和HTML作为主流的数据源格式&#xff0c;常常出现在我们的数据提取任务…
阅读更多...
PHP Discord获取频道消息功能实现

PHP Discord获取频道消息功能实现

PHP Discord获取频道消息功能实现 1. 关注对应频道2. 添加机器人3. 配置机器人权限4. 使用 DiscordPHP 类库5. 代码示例 (Laravel 框架)6. 服务器部署 1. 关注对应频道 首先要创建自己的频道, 然后到对应的公告频道中关注这个频道(这时 Discord 会让你选择频道, 选择之前创建的…
阅读更多...
集成内部高端电源开关LTC3637HMSE、LTC3637MPMSE稳压器，TJA1443AT汽车CAN FD收发器。

集成内部高端电源开关LTC3637HMSE、LTC3637MPMSE稳压器，TJA1443AT汽车CAN FD收发器。

一、LTC3637 76V、1A 降压型稳压器 &#xff08;简介&#xff09;LTC3637是一款高效率降压DC/DC稳压器&#xff0c;集成内部高端电源开关&#xff0c;功耗仅12μA DC&#xff0c;空载时可保持稳定的输出电压。LTC3637可提供高达1A的负载电流&#xff0c;并具有可编程峰值电流限…
阅读更多...
虹科分享 | 想买车无忧?AR为您带来全新体验!

虹科分享 | 想买车无忧?AR为您带来全新体验!

新能源汽车的蓬勃发展&#xff0c;推动着汽车行业加速进行数字化变革。据数据显示&#xff0c;全球新能源汽车销售额持续上升&#xff0c;预计到2025年&#xff0c;新能源汽车市场规模将达到约 4200亿美元&#xff0c;年复合增长率超过 30%。这表明消费者对清洁能源出行的需求不…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023