快捷導(dǎo)航

基于vue3實(shí)現(xiàn)一個抽獎小項目

更新時間：2023年01月23日 09:27:38 作者：曦12

在公司年會期間我做了個抽獎小項目，非常棒，今天把他分享到腳本之家平臺，供大家學(xué)習(xí)參考，對vue3實(shí)現(xiàn)抽獎小項目感興趣的朋友一起看看吧

前言

在公司年會期間我做了個抽獎小項目，我把它分享出來，有用得著的可以看下。
瀏覽鏈接：http://xisite.top/original/luck-draw/index.html
項目鏈接：https://gitee.com/xi1213/luck-draw (歡迎star!)項目截圖：

實(shí)現(xiàn)目標(biāo)數(shù)據(jù)保存：無后端，純前端實(shí)現(xiàn)，瀏覽器刷新或者關(guān)閉數(shù)據(jù)不能丟失。姓名切換：點(diǎn)擊中部開始按鈕姓名快速切換。獎項切換：獎項為操作人員手動切換設(shè)置。歷史記錄：抽獎完成后需要有歷史記錄。數(shù)據(jù)導(dǎo)入：允許參與人員的表格導(dǎo)入。

數(shù)據(jù)保存

無后臺，純前端實(shí)現(xiàn)而且需要刷新關(guān)閉瀏覽器數(shù)據(jù)不丟失，很容易便會想到使用localStorage，localStorage存入的數(shù)據(jù)具有持久性，不會因?yàn)樗⑿禄蜿P(guān)閉瀏覽器而變化(除非手動刻意的清除)，有別于sessionstorage，localStorage的生命周期是永久，sessionstorage是瀏覽器或者標(biāo)簽頁關(guān)閉。

因?yàn)榇嫒氲臄?shù)據(jù)不是單純的字符串，而是具有結(jié)構(gòu)性的對象數(shù)組，所以需要配合JSON.stringify與JSON.parse來使用。這是存入數(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

姓名切換

抽獎的方式是數(shù)據(jù)導(dǎo)入后，點(diǎn)擊中間的圓形開始按鈕，姓名便開始快速切換，再次點(diǎn)擊按鈕便停止姓名切換，彈出對話框顯示當(dāng)前姓名以及設(shè)置的獎項。

切換姓名利用了vue的數(shù)據(jù)響應(yīng)式原理。先獲取到所有的參與人員數(shù)據(jù)，然后亂序處理，最后循環(huán)展示，我這里每個姓名展示的時間為50毫秒，你也可以自己設(shè)置。這里的數(shù)組亂序我使用了洗牌算法，其實(shí)就是利用Math.random獲取數(shù)組的隨機(jī)下標(biāo)，然后與最后一個元素進(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);
  }
}

獎項切換

獎項切換直接使用elementPlus的單選框即可。

歷史記錄

每次點(diǎn)擊抽獎出現(xiàn)結(jié)果時，將之前的抽獎結(jié)果取出來，然后把當(dāng)前的結(jié)果添加到末尾。

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

數(shù)據(jù)導(dǎo)入

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

首先是下載模板。

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

點(diǎn)擊下載模板按鈕時直接調(diào)用以下方法即可，其中的saveAs是file-saver插件中的方法，傳入路徑與文件名即可。

import { saveAs } from 'file-saver';
//下載模板
function downTemp() {
    let fileName = "人員模板.xlsx";//文件名
    let fileUrl = "./template/";//文件路徑(路徑相對index.html)
    saveAs(fileUrl + fileName, fileName);
}

表格處理好，

點(diǎn)擊導(dǎo)入按鈕讀取表格數(shù)據(jù)時使用的是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對象
    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); //開始讀取文件
    ((document.getElementsByClassName("inp-xlsx")[0]).value = ""); //置空選中的文件
};