前言
在 公司 年会期间我做了个抽奖小项目，我把它分享出来，有用得着的可以看下。 浏览链接： http://xisite.top/original/luck-draw/index.html 项目链接： https://gitee.com/xi1213/luck-draw (欢迎star!)项目截图：
实现目标数据保存：无 后端 ，纯前端实现，浏览器刷新 或者 关闭数据不能丢失。姓名切换：点击中部 开始 按钮姓名快速切换。奖项切换：奖项为操作人员手动切换设置。 历史记录 ：抽奖完成后需要有历史记录。数据导入：允许参与人员的表格导入。
数据保存
无后台，纯前端实现而且需要刷新关闭浏览器数据不丢失，很容易便会想到使用localStorage，localStorage存入的数据具有持久性，不会因为刷新或关闭浏览器而变化(除非手动刻意的清除)，有别于sessionstorage，localStorage的生命周期是永久，sessionstorage是浏览器或者标签页关闭。
因为存入的数据不是单纯的字符串，而是具有结构性的对象数组，所以需要配合JSON.stringify与JSON.parse来使用。这是存入数据的方法：
localStorage.set IT em("luckDrawHis", JSON.stringify(luckDrawHis));//JSON.stringify将json转换为字符串
这是读取数据的方法：
JSON.parse(localStorage.getItem("luckDrawHis"))//JSON.parse将字符串转换为json
姓名切换
抽奖的方式是数据导入后，点击中间的 圆 形开始按钮，姓名便开始快速切换，再次点击按钮便停止姓名切换，弹出 对话 框显示当前姓名以及设置的奖项。
切换姓名 利用 了vue的数据响应式原理。先获取到所有的参与人员数据，然后乱序处理，最后循环展示，我这里每个姓名展示的时间为50毫秒，你也可以自己设置。这里的数组乱序我使用了洗牌算法，其实就是利 用M ath.random 获取数组 的随机 下标 ，然后与最后一个元素进行位置交换。
//洗牌算法(乱序数组)
function shuffle (arr) {
let l = arr.length
let index, temp
while (l > 0) {
index = Math.floor(Math.random() * l)
temp = arr[l - 1]
arr[l - 1] = arr[index]
arr[index] = temp
l--
}
return arr;
}
//循环列表
function forN am eList(list) {
list = shuffle(list);
for (let i = 0; i < list.length; i++ ) {
setTimeout(() => {
if (!isStop.value) {
curName.value = list[i].name;
(i == list.length - 1) && (forNameList(nameList.value));//数组耗尽循环
}
}, 50 * i);
}
}
奖项切换
奖项切换直接使用elementPlus的单选框即可。
历史记录
每次点击抽奖出现结果时，将之前的抽奖结果取出来，然后把当前的结果添加到末尾。
点击抽奖历史按钮时再将所有历史数据取出来。
数据导入
由于需要导入人员表格数据，这里我使用了xlsx插件与file -s aver插件来实现。
首先是下载模板。
将事先准备好的表格模板放在项目的p ub lic目录下。
点击下载模板按钮时直接调用以下方法即可，其中的saveAs是file-saver插件中的方法，传入路径与文件名即可。
import { saveAs } From 'file-saver';
//下载模板
function downTemp() {
let fileName = "人员模板.xlsx";//文件名
let fileUrl = "./template/";//文件路径(路径相对index.ht ML )
saveAs(fileUrl + fileName, fileName);
}
表格处理好，
点击导入按钮读取表格数据时使用的是xlsx插件，下面是读取数据的方法。
import * as XLSX f rom "xlsx";
//导入数据
function importData(e) {
isLoading.value = true;
let file = e.t arg et.files[0]; //获取事件中的file对象
let fileReader = new FileReader(); //创建文件读取器
fileReader.onload = (event) => {
let result = event.target.result; //获取读取的结果
let work Book = XLSX.read(result, { ty PE : "binary" }); //XLSX读取返回的结果
let jsonData = XLSX.utils.sheet_to_json(
workBook.Sheets[workBook.Sheet names [0]]
); //将读取结果转换为json
tabData.value = [];
jsonData.for each ((j) => {
tabData.value.push({
name: j.姓名,
age: j.性别,
department: j. 部门 ,
});
}); //处理成需要的 数据格式
localStorage.setItem("tabData", JSON.stringify(tabData.value));//数据存入本地
tabDataS.value = JSON.parse(localStorage.getItem("tabData"));//取出数据
emits("getNameList", tabData);
isLoading.value = false;
};
fileReader.readAsBinaryString(file); //开始读取文件
((document.getElementsBy classname ("inp-xlsx")[0]).value = ""); //置空选中的文件
};
结语
项目很 简单 ，但给我的时间很少，很多优化的地方都没做好，后面有时间了再优化下，顺便适配下移动端。 原文地址： https://xiblogs.top/?id=53到此这篇关于基于vue3实现一个抽奖小项目的 文章 就介绍到这了,更多相关vue3抽奖项目内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
您可能感兴趣的文章: Vue3实现九宫格抽奖的示例代码 vue3实现抽奖模板设置
总结
以上是 为你收集整理的 基于vue3实现一个抽奖小项目 全部内容，希望文章能够帮你解决 基于vue3实现一个抽奖小项目 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。