基于vue3實(shí)現(xiàn)一個(gè)抽獎(jiǎng)小項(xiàng)目
前言
- 在公司年會(huì)期間我做了個(gè)抽獎(jiǎng)小項(xiàng)目,我把它分享出來(lái),有用得著的可以看下。
- 瀏覽鏈接:http://xisite.top/original/luck-draw/index.html
- 項(xiàng)目鏈接:https://gitee.com/xi1213/luck-draw (歡迎star!)項(xiàng)目截圖:

實(shí)現(xiàn)目標(biāo)數(shù)據(jù)保存:無(wú)后端,純前端實(shí)現(xiàn),瀏覽器刷新或者關(guān)閉數(shù)據(jù)不能丟失。姓名切換:點(diǎn)擊中部開(kāi)始按鈕姓名快速切換。獎(jiǎng)項(xiàng)切換:獎(jiǎng)項(xiàng)為操作人員手動(dòng)切換設(shè)置。歷史記錄:抽獎(jiǎng)完成后需要有歷史記錄。數(shù)據(jù)導(dǎo)入:允許參與人員的表格導(dǎo)入。
數(shù)據(jù)保存
無(wú)后臺(tái),純前端實(shí)現(xiàn)而且需要刷新關(guān)閉瀏覽器數(shù)據(jù)不丟失,很容易便會(huì)想到使用localStorage,localStorage存入的數(shù)據(jù)具有持久性,不會(huì)因?yàn)樗⑿禄蜿P(guān)閉瀏覽器而變化(除非手動(dòng)刻意的清除),有別于sessionstorage,localStorage的生命周期是永久,sessionstorage是瀏覽器或者標(biāo)簽頁(yè)關(guān)閉。

因?yàn)榇嫒氲臄?shù)據(jù)不是單純的字符串,而是具有結(jié)構(gòu)性的對(duì)象數(shù)組,所以需要配合JSON.stringify與JSON.parse來(lái)使用。這是存入數(shù)據(jù)的方法:
localStorage.setItem("luckDrawHis", JSON.stringify(luckDrawHis));//JSON.stringify將json轉(zhuǎn)換為字符串這是讀取數(shù)據(jù)的方法:
JSON.parse(localStorage.getItem("luckDrawHis"))//JSON.parse將字符串轉(zhuǎn)換為json姓名切換
抽獎(jiǎng)的方式是數(shù)據(jù)導(dǎo)入后,點(diǎn)擊中間的圓形開(kāi)始按鈕,姓名便開(kāi)始快速切換,再次點(diǎn)擊按鈕便停止姓名切換,彈出對(duì)話框顯示當(dāng)前姓名以及設(shè)置的獎(jiǎng)項(xiàng)。

切換姓名利用了vue的數(shù)據(jù)響應(yīng)式原理。先獲取到所有的參與人員數(shù)據(jù),然后亂序處理,最后循環(huán)展示,我這里每個(gè)姓名展示的時(shí)間為50毫秒,你也可以自己設(shè)置。這里的數(shù)組亂序我使用了洗牌算法,其實(shí)就是利用Math.random獲取數(shù)組的隨機(jī)下標(biāo),然后與最后一個(gè)元素進(jìn)行位置交換。
//洗牌算法(亂序數(shù)組)
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;
}
//循環(huán)列表
function forNameList(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));//數(shù)組耗盡循環(huán)
}
}, 50 * i);
}
}獎(jiǎng)項(xiàng)切換
獎(jiǎng)項(xiàng)切換直接使用elementPlus的單選框即可。


歷史記錄
每次點(diǎn)擊抽獎(jiǎng)出現(xiàn)結(jié)果時(shí),將之前的抽獎(jiǎng)結(jié)果取出來(lái),然后把當(dāng)前的結(jié)果添加到末尾。

點(diǎn)擊抽獎(jiǎng)歷史按鈕時(shí)再將所有歷史數(shù)據(jù)取出來(lái)。

數(shù)據(jù)導(dǎo)入
由于需要導(dǎo)入人員表格數(shù)據(jù),這里我使用了xlsx插件與file-saver插件來(lái)實(shí)現(xiàn)。

首先是下載模板。

將事先準(zhǔn)備好的表格模板放在項(xiàng)目的public目錄下。

點(diǎn)擊下載模板按鈕時(shí)直接調(diào)用以下方法即可,其中的saveAs是file-saver插件中的方法,傳入路徑與文件名即可。
import { saveAs } from 'file-saver';
//下載模板
function downTemp() {
let fileName = "人員模板.xlsx";//文件名
let fileUrl = "./template/";//文件路徑(路徑相對(duì)index.html)
saveAs(fileUrl + fileName, fileName);
}表格處理好,

點(diǎn)擊導(dǎo)入按鈕讀取表格數(shù)據(jù)時(shí)使用的是xlsx插件,下面是讀取數(shù)據(jù)的方法。
import * as XLSX from "xlsx";
//導(dǎo)入數(shù)據(jù)
function importData(e) {
isLoading.value = true;
let file = e.target.files[0]; //獲取事件中的file對(duì)象
let fileReader = new FileReader(); //創(chuàng)建文件讀取器
fileReader.onload = (event) => {
let result = event.target.result; //獲取讀取的結(jié)果
let workBook = XLSX.read(result, { type: "binary" }); //XLSX讀取返回的結(jié)果
let jsonData = XLSX.utils.sheet_to_json(
workBook.Sheets[workBook.SheetNames[0]]
); //將讀取結(jié)果轉(zhuǎn)換為json
tabData.value = [];
jsonData.forEach((j) => {
tabData.value.push({
name: j.姓名,
age: j.性別,
department: j.部門,
});
}); //處理成需要的數(shù)據(jù)格式
localStorage.setItem("tabData", JSON.stringify(tabData.value));//數(shù)據(jù)存入本地
tabDataS.value = JSON.parse(localStorage.getItem("tabData"));//取出數(shù)據(jù)
emits("getNameList", tabData);
isLoading.value = false;
};
fileReader.readAsBinaryString(file); //開(kāi)始讀取文件
((document.getElementsByClassName("inp-xlsx")[0]).value = ""); //置空選中的文件
};結(jié)語(yǔ)
- 項(xiàng)目很簡(jiǎn)單,但給我的時(shí)間很少,很多優(yōu)化的地方都沒(méi)做好,后面有時(shí)間了再優(yōu)化下,順便適配下移動(dòng)端。
- 原文地址:https://xiblogs.top/?id=53
到此這篇關(guān)于基于vue3實(shí)現(xiàn)一個(gè)抽獎(jiǎng)小項(xiàng)目的文章就介紹到這了,更多相關(guān)vue3抽獎(jiǎng)項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue動(dòng)態(tài)修改網(wǎng)頁(yè)標(biāo)題的方法及遇到問(wèn)題
Vue下有很多的方式去修改網(wǎng)頁(yè)標(biāo)題,這里總結(jié)下解決此問(wèn)題的幾種方案:,需要的朋友可以參考下2019-06-06
Node.js使用orm2進(jìn)行update操作時(shí)關(guān)聯(lián)字段無(wú)法修改的解決方法
這篇文章主要給大家介紹了Node.js使用orm2進(jìn)行update操作時(shí)關(guān)聯(lián)字段無(wú)法修改的解決方法,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-06-06
Nuxt.js的路由跳轉(zhuǎn)操作(頁(yè)面跳轉(zhuǎn)nuxt-link)
這篇文章主要介紹了Nuxt.js的路由跳轉(zhuǎn)操作(頁(yè)面跳轉(zhuǎn)nuxt-link),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue動(dòng)態(tài)綁定圖標(biāo)的完整步驟
動(dòng)態(tài)綁定是我們?nèi)粘i_(kāi)發(fā)中經(jīng)常遇到的一個(gè)需求,下面這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)綁定圖標(biāo)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-05-05
詳解vue express啟動(dòng)數(shù)據(jù)服務(wù)
本篇文章主要介紹了vue express啟動(dòng)數(shù)據(jù)服務(wù),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Vue路由回退的完美解決方案(vue-route-manager)
最近做了一個(gè)vue項(xiàng)目關(guān)于路由場(chǎng)景的問(wèn)題,路由如何回退指定頁(yè)面,在此做個(gè)記錄,這篇文章主要給大家介紹了關(guān)于Vue路由回退的完美解決方案,主要利用的是vue-route-manager,需要的朋友可以參考下2021-09-09
vue中路由跳轉(zhuǎn)的多種方式(和$router下路由跳轉(zhuǎn)的那幾個(gè)方法的區(qū)別)
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn),本文給大家分享vue中路由跳轉(zhuǎn)的幾種方式(和$router下路由跳轉(zhuǎn)的那幾個(gè)方法的區(qū)別),感興趣的朋友一起看看吧2023-11-11

