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

设计思路

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

课堂点名

座位组件 seat.vue

javascript 复制代码

<script setup>//组合式API
  import { 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

javascript 复制代码

<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=0
  const 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>

调用

javascript 复制代码

 <classroom ></classroom>

扩展

程序还可以作一下扩展：

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

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

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

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

以上条件可以组合