vue中添加語(yǔ)音播報(bào)功能的實(shí)現(xiàn)
1:首先把我們的靜態(tài)資源文件加入到前端工程項(xiàng)目當(dāng)中
我這里mp3文件就是要播報(bào)的語(yǔ)言文件
2: 頁(yè)面中加入標(biāo)簽
<!-- src 后面的鏈接是我保存在static文件下的一段報(bào)警聲 --> <audio v-show="false" id="audioSuccessIn" src="/static/successIn.mp3"/> <audio v-show="false" id="audioFalseIn" src="/static/falseIn.mp3"/> <audio v-show="false" id="audioSuccessOut" src="/static/successOut.mp3"/> <audio v-show="false" id="audioFalseOut" src="/static/falseOut.mp3"/>
3: 在相應(yīng)的方法的后面調(diào)用我們的函數(shù)即可
在method里面對(duì)應(yīng)的方法里面進(jìn)行調(diào)用即可。
goodsDetailInOutSave(this.json) .then(res => { this.detailFormVisible = false this.loading = false if (res.success) { this.getdata(this.formInline) this.$message({ type: 'success', message: '商品出入庫(kù)成功!' }) if(this.inOrOut===1){ this.playaudio('audioSuccessIn') }else if(this.inOrOut===2){ this.playaudio('audioSuccessOut') } } else { this.$message({ type: 'info', message: res.msg }) if(this.inOrOut===1){ this.playaudio('audioFalseIn') }else if(this.inOrOut===2){ this.playaudio('audioFalseOut') } } }) .catch(err => { // this.goodsNumEditVisible = false this.loading = false this.$message.error('商品出入庫(kù)失敗,請(qǐng)稍后再試!') }) },
到此這篇關(guān)于vue中添加語(yǔ)音播報(bào)功能的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue 添加語(yǔ)音播報(bào)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決vue net :ERR_CONNECTION_REFUSED報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了解決vue net :ERR_CONNECTION_REFUSED報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08Vue axios全局?jǐn)r截 get請(qǐng)求、post請(qǐng)求、配置請(qǐng)求的實(shí)例代碼
這篇文章主要介紹了Vue axios全局?jǐn)r截 get請(qǐng)求、post請(qǐng)求、配置請(qǐng)求的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn)
這篇文章主要介紹了element-ui中el-upload多文件一次性上傳的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12淺析Vue3如何實(shí)現(xiàn)頁(yè)面訪問(wèn)攔截
在Vue3中,頁(yè)面訪問(wèn)攔截(Navigation?Guards)是一種常見(jiàn)的路由控制機(jī)制,那么Vue3具體是如何實(shí)現(xiàn)這一功能的呢,下面就跟隨小編一起來(lái)學(xué)習(xí)一下吧2024-03-03vue + canvas實(shí)現(xiàn)涂鴉面板的示例代碼
這篇文章主要給大家介紹了vue + canvas實(shí)現(xiàn)涂鴉面板的示例,文章通過(guò)代碼示例介紹的非常詳細(xì),感興趣的小伙伴跟著小編一起來(lái)看看吧2023-08-08