vue实现随机点名

实现随机点名的Vue组件

创建Vue组件需要定义数据和方法，以下是一个简单的随机点名实现方案：

<template>
  <div class="random-call">
    <h3>随机点名系统</h3>
    <textarea v-model="nameList" placeholder="请输入名单，每行一个名字"></textarea>
    <button @click="shuffleNames">开始随机</button>
    <button @click="stopShuffle" v-if="isShuffling">停止</button>
    <div class="result" v-if="selectedName">
      选中: <span class="name">{{ selectedName }}</span>
    </div>
    <div class="shuffling" v-if="isShuffling && !selectedName">
      随机中: {{ currentShuffleName }}
    </div>
  </div>
</template>

组件逻辑实现

<script>
export default {
  data() {
    return {
      nameList: '',
      selectedName: '',
      currentShuffleName: '',
      isShuffling: false,
      shuffleInterval: null
    }
  },
  methods: {
    shuffleNames() {
      const names = this.nameList.split('\n').filter(name => name.trim())
      if (names.length === 0) return

      this.isShuffling = true
      this.selectedName = ''

      let counter = 0
      this.shuffleInterval = setInterval(() => {
        this.currentShuffleName = names[Math.floor(Math.random() * names.length)]
        counter++

        if (counter > 30) {
          this.stopShuffle()
        }
      }, 100)
    },
    stopShuffle() {
      clearInterval(this.shuffleInterval)
      this.isShuffling = false
      this.selectedName = this.currentShuffleName
      this.currentShuffleName = ''
    }
  }
}
</script>

样式设计

<style scoped>
.random-call {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

textarea {
  width: 100%;
  height: 200px;
  margin: 10px 0;
  padding: 8px;
}

button {
  padding: 8px 16px;
  margin: 0 5px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #369f6e;
}

.name {
  font-size: 24px;
  color: #e74c3c;
  font-weight: bold;
}

.shuffling {
  margin-top: 20px;
  font-size: 18px;
  color: #3498db;
}
</style>

功能扩展建议

1. 增加历史记录功能，保存已点名的学生
2. 添加音效增强体验感
3. 实现排除已点名学生的功能
4. 增加名单导入导出功能
5. 添加动画效果使随机过程更生动

使用方法

1. 在文本框中输入名单，每行一个名字
2. 点击"开始随机"按钮开始随机选择
3. 随机过程中会快速显示不同名字
4. 点击"停止"按钮或等待自动停止后显示最终结果

该组件可以单独使用，也可以集成到更大的Vue应用中。根据需求可以调整随机速度和动画效果。