以【喊话】【停止喊话】为例子
<template> <div class="shout-control"> <!-- 合并后的单按钮：根据状态切换文本和逻辑 --> <el-button size="small" @click="toggleShout" :type="isShouting ? 'danger' : 'primary'" > <span>{{ isShouting ? '停止喊话' : '喊话' }}</span> </el-button> </div> </template> <script setup> import { ref } from 'vue' // 核心状态：是否正在喊话（控制按钮文本/逻辑） const isShouting = ref(false) // 定时器/音频实例（用于实现喊话持续逻辑 & 停止功能） /** * 切换喊话/停止喊话的核心方法 */ const toggleShout = () => { if (isShouting.value) { // 当前是「喊话中」→ 执行停止逻辑 stopShout() } else { // 当前是「未喊话」→ 执行开始喊话逻辑 startShout() } } /** * 开始喊话的具体逻辑 */ const startShout = () => { isShouting.value = true console.log('▶️ 开始喊话') } /** * 停止喊话的具体逻辑 */ const stopShout = () => { isShouting.value = false console.log('⏹️ 停止喊话') } </script> <style scoped> .shout-control { /* 可选：按钮样式优化 */ margin: 10px; } </style>
)
