基于vue3实现的课堂点名程序

设计思路

采用vue3实现的课堂点名程序，模拟课堂座位布局，点击开始点名按钮后，一朵鲜花在座位间传递，直到点击结束点名按钮，鲜花停留的座位被点名。

课堂点名

座位组件 seat.vue

<script setup>//组合式APIimport { ref,reactive,onMounted } from 'vue';const seatImage=ref('/src/assets/desk.jpg')const props=defineProps({ // 当前图片索引row:{type:Number,default:0},col:{type:Number,default:0},callRow:{type:Number,default:0},callCol:{type:Number,default:0},sName:{type:String,default:""}})
</script>
<template ><div style="height: 94px;"> <button  ><img :src="seatImage" alt="Button Image"></button><div style="width: 42px; text-align: center;">{{props.sName}}</div><div v-if="props.callRow===props.row && props.callCol===props.col">🌺 </div>
</div>
</template>
<style >
</style>

教室组件 classroom.vue

<template><div>  <el-button type="primary" @click="startCall">开始点名</el-button><el-button type="danger" @click="overCall">结束点名</el-button></div><br><el-table :data="tableData" style="width: 100%" table-layout="auto"><el-table-column  :label= item.col v-for="(item, index) in tableData[0]" :key="index"><template v-slot="scope"><seat :col=scope.row[index].col  :row=scope.row[index].row :callRow=callRow           :callCol=callCol:sName=scope.row[index].sName:key="componentKey"></seat></template></el-table-column></el-table></template><script  setup>import { ref,reactive,onMounted} from 'vue';import seat from './seat.vue';var timer=ref("")const callRow=ref(0)const callCol=ref(0)var componentKey=0const classroom=ref( {rows:3,cols:3,seatsMap:[{row: 0,col: 0,sName:"樊兰英"}, {row: 0,col: 1,sName:"张磊"},{row: 0,col: 2,sName:"朱旭"},{row: 1,col: 0,sName:"沈玉"},   {row: 1,col: 1,sName:"邓平"},{row: 1,col: 2,sName:"蒋兰英"},{row: 2,col: 0,sName:"程晨"},   {row: 2,col: 1,sName:"张承"},{row: 2,col: 2,sName:"陈楚华"}]})const tableData = ref([])makeTable();mergeData();function makeTable () {for (let i = 0; i < classroom.value.rows; i++) tableData.value.push({})for(let i = 0; i < classroom.value.cols; i++){tableData.value.forEach((tableRow,idxRow)=>{let fieldName='c'+i; tableRow[fieldName]={row:idxRow,col:i,sName:""};})}}function mergeData () {// 合并数据for (let i = 0; i < classroom.value.seatsMap.length; i++) {			  let fieldName='c'+classroom.value.seatsMap[i].col;tableData.value[classroom.value.seatsMap[i].row][fieldName] = classroom.value.seatsMap[i]}}function startCall(){  timer = setInterval(genRowCol, 200); }function genRowCol() { //随机产生座位号callRow.value= parseInt(Math.random()*classroom.value.rows) ;callCol.value= parseInt(Math.random()*classroom.value.cols) ;componentKey += 1;//组件key加1，强制子组件刷新}function overCall(){ clearInterval(timer);}</script>

调用

 <classroom ></classroom>

扩展

程序还可以作一下扩展：

1）按性别点名，比如这次抽取男生或女生；

2）按成绩排名点名，比如这次抽取成绩好的学生；

3）按课堂表现点名，比如抽取不爱发言的学生；

4）优先抽取没有点过名的学生

以上条件可以组合