vue项目中遇到的问题（1、点击空格或回车会触发鼠标上次的点击事件；2、自动语音播报；3、引入钉钉登录）

1、点击空格或回车会触发鼠标上次的点击事件
原因：因为button按钮点击之后焦点没有移除，点击空格或回车之后会继续执行button的click事件
解决办法：
@keyup.prevent @keydown.enter.prevent

<el-button type="primary" size="small" @click="addProject" @keyup.prevent @keydown.enter.prevent>添加项目</el-button>

2、自动语音播报
使用window自带的speechSynthesis
vue3写法

	const voiceBroadcast = (value) => {
      const localAudio = window.speechSynthesis
      const audioService = new SpeechSynthesisUtterance()
      localAudio.cancel()
      audioService.text = '张三提交了5个样品，请及时进行试验'
      audioService.lang = 'zh-CN'
      audioService.volume = 2 // 音量
      audioService.pitch = 1 // 音色
      audioService.rate = 1.5 // 播放速度
      localAudio.speak(audioService)
    }
    // 虚拟点击事件
    // 给任意一个元素添加ref="voice" 并加上@click="voiceBroadcast()
    const handleVoice = () => {
      nextTick(() => {
        state.voice.click()
      })
    }

注意：要设置一个虚拟的点击事件否则的话无法激活会有警告
[Deprecation] speechSynthesis.speak() without user activation is no longer allowed since M71, around December 2018. See https://www.chromestatus.com/feature/5687444770914304 for more details

3、引入钉钉登录
vue3引入钉钉登录