基于vue实现随机点名功能

基于vue + element

实现效果

代码

<template>
    <div>
        <div class="Box">
            <div style="position: relative;">
                <el-progress type="circle" :width="300" :percentage="100" :show-text="false"></el-progress>
                <div class="name" v-loading="loading">
                    <div v-for="(item, index) in selectList" :key="index">
                        {{ item }}
                    </div>
                    <h4 v-if="selectList.length == 0">同学们,要点名了!</h4>
                </div>
            </div>
            <div style="margin-top: 10px;">
                <el-tag @click="chooseNum(item)" style="margin-left: 10px;" v-for="(item, index) in NumList" :key="index">
                    {{ item }}
                </el-tag>
            </div>
            <el-button style="margin-top: 10px;" v-loading="loading" @click="randomStudent">随机抽{{ Num }}人</el-button>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            students: ['小明', '小红', '小刚', '小丽', '小亮'],
            NumList: [1, 2, 3, 4, 5],//随机抽多少人数组
            selectList: [],//选中的学生数组
            selectedStudent: '',//当前选中的学生
            loading: false,
            Num: 1,
        }
    },
    methods: {
        //抽取随机学生
        randomStudent() {
            this.selectList = []
            this.loading = true
            let arr = JSON.parse(JSON.stringify(this.students))  //深拷贝一份数组
            for (let i = 0; i < this.Num; i++) {
                let index = Math.floor(Math.random() * arr.length);
                this.selectList.push(arr[index])
                arr.splice(index, 1)
            }
            setTimeout(() => {
                this.loading = false
            }, 500)

        },
        //选择抽取的人数
        chooseNum(num) {
            console.log('num', num)
            this.Num = num
        }
    }

}
</script>

<style scoped>
.Box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 450px;
    width: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
}

.Box .name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
}
</style>