vue项目中遇到的问题(1、点击空格或回车会触发鼠标上次的点击事件;2、自动语音播报;3、引入钉钉登录)
原因:因为button按钮点击之后焦点没有移除,点击空格或回车之后会继续执行button的click事件解决办法:@keyup.prevent @keydown.enter.prevent<el-button type="primary" size="small" @click="addProject" @keyup.prevent @keydown.enter.prevent>添加项
·
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引入钉钉登录
更多推荐
已为社区贡献4条内容
所有评论(0)