当前位置:主页 > vue > vue3实现一个抽奖小项目

vue3实现一个抽奖小项目

xi2年前 (2023-01-20)vue28162

前言

实现目标

  • 数据保存:无后端,纯前端实现,浏览器刷新或者关闭数据不能丢失。
  • 姓名切换:点击中部开始按钮姓名快速切换。
  • 奖项切换:奖项为操作人员手动切换设置。
  • 历史记录:抽奖完成后需要有历史记录。
  • 数据导入:允许参与人员的表格导入。

数据保存

无后台,纯前端实现而且需要刷新关闭浏览器数据不丢失,很容易便会想到使用localStorage,localStorage存入的数据具有持久性,不会因为刷新或关闭浏览器而变化(除非手动刻意的清除),有别于sessionstorage,localStorage的生命周期是永久,sessionstorage是浏览器或者标签页关闭。

因为存入的数据不是单纯的字符串,而是具有结构性的对象数组,所以需要配合JSON.stringify与JSON.parse来使用。这是存入数据的方法:

localStorage.setItem("luckDrawHis", JSON.stringify(luckDrawHis));//JSON.stringify将json转换为字符串

这是读取数据的方法:

JSON.parse(localStorage.getItem("luckDrawHis"))//JSON.parse将字符串转换为json

姓名切换

抽奖的方式是数据导入后,点击中间的圆形开始按钮,姓名便开始快速切换,再次点击按钮便停止姓名切换,弹出对话框显示当前姓名以及设置的奖项。

切换姓名利用了vue的数据响应式原理。先获取到所有的参与人员数据,然后乱序处理,最后循环展示,我这里每个姓名展示的时间为50毫秒,你也可以自己设置。这里的数组乱序我使用了洗牌算法,其实就是利用Math.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 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));//数组耗尽循环
      }
    }, 50 * i);
  }
}

奖项切换

奖项切换直接使用elementPlus的单选框即可。

历史记录

每次点击抽奖出现结果时,将之前的抽奖结果取出来,然后把当前的结果添加到末尾。

点击抽奖历史按钮时再将所有历史数据取出来。

数据导入

由于需要导入人员表格数据,这里我使用了xlsx插件与file-saver插件来实现。

首先是下载模板。

将事先准备好的表格模板放在项目的public目录下。

点击下载模板按钮时直接调用以下方法即可,其中的saveAs是file-saver插件中的方法,传入路径与文件名即可。

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

表格处理好,

点击导入按钮读取表格数据时使用的是xlsx插件,下面是读取数据的方法。

import * as XLSX from "xlsx";
//导入数据
function importData(e) {
    isLoading.value = true;
    let file = e.target.files[0]; //获取事件中的file对象
    let fileReader = new FileReader(); //创建文件读取器
    fileReader.onload = (event) => {
        let result = event.target.result; //获取读取的结果
        let workBook = XLSX.read(result, { type: "binary" }); //XLSX读取返回的结果
        let jsonData = XLSX.utils.sheet_to_json(
            workBook.Sheets[workBook.SheetNames[0]]
        ); //将读取结果转换为json
        tabData.value = [];
        jsonData.forEach((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.getElementsByClassName("inp-xlsx")[0]).value = ""); //置空选中的文件
};

结语

项目很简单,但给我的时间很少,很多优化的地方都没做好,后面有时间了再优化下,顺便适配下移动端。

转载请标注来源与原作者

本文链接:https://xiblogs.top/?id=53

“vue3实现一个抽奖小项目” 的相关文章

vue自定义组件的点击事件失效

vue自定义组件的点击事件失效

在vue开发过程中为了减少重复代码,很多时候都需要将重复的部分写成一个组件,方便调用。但是使用组件时很可能又会给该组件添加点击事件。如果直接这样写,事件则会失效:正确写法应该是这样:...

vue打包后dist的使用

vue打包后dist的使用

发现问题vue项目完成打包出dist后准备打开index.html,发现居然页面是一片空白,f12一片报红。 分析问题经过多次网上查询后发现这是由于vue打包时,脚手架会帮你配置好大量参数,但其中路...

canvas实现图片标记

canvas实现图片标记

前言由于业务需求,需要有一个图片标记功能,其实就是对图片画框画线做标记,类似微信的图片编辑但是需要存下标记图及其标记的具体数据,。功能其实很简单,但刚开始的时候也是费了一些功夫的。我将原项目中该功能抽...

评论列表

优才圈
优才圈 IP:广东省
2年前 (2023-02-23)

可以内部设置中奖

xi IP:四川省 回复:
哈哈哈,好家伙,留后门是吧。
2年前 (2023-02-26)

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。