vue播放音频以及添加插槽

引言

vue播放音频以及在template模板中对某些属性添加插槽（slot-scope）处理。

audio播放音频

在template模板添加audio标签

  <!-- 高温报警开关 --><span><el-switch v-model="alarm" inactive-text="警报"></el-switch></span><!-- 音频文件加载 --><audio ref="audio" controls hidden="true"><source :src="audioSrc" type="audio/mpeg" /></audio>

data接受数据

data() {return {alarm: false,isPlaying: false,audioSrc: require(`@/assets/audio/black_alerm.mp3`),};},

在method 写方法根据状态来决定是否要播放警报

 methods: {//播放play() {if (this.alarm) {if (!this.isPlaying) {this.$refs.audio.play();this.isPlaying = true;}}});},//停止播放stopPlay() {var status = this.alarm;if (this.isPlaying) {if (!status) {this.$refs.audio.pause();this.isPlaying = false;}}},}

tempalte添加插槽

以table表为例

添加table表模板并对某个属性添加插槽

 <template><el-table :data="tableData" border style="width: 100%"><el-table-column prop="answer" label="答案"><template slot-scope="scope"><el-tag v-if="scope.row.status == 0" type="danger">{{scope.row.answer}}</el-tag><el-tag v-if="scope.row.status == 1" type="success">{{scope.row.answer}}</el-tag></template></el-table-column><el-table-column prop="standardAnswer" label="正确答案"> </el-table-column></el-table>
</template>

绑定数据tableData

data() {return {tableData: [{status:1answer: '王小虎',standardAnswer: '上海市普陀区金沙江路 1518 弄'} ],};},

vue播放音频以及添加插槽相关推荐

vue自定义音频播放组件_易于创建Vue的自定义音频播放器组件
vue自定义音频播放组件音频更好 (vue-audio-better) Easy to create custom audio player components for Vue.js. 易于为Vu ...
Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击
场景 Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音): Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)_BADAO_LIUMAN ...
ios微信下vue项目组件切换并自动播放音频的解决方案
最近在做一个英语答题项目 , 项目需求是通过答题取的成绩 , 答题的题型是分为 , 听音选图 , 看图选词 , 和填空题 . 项目总共分为了3个页面 , 开始页 ,答题页和结束页面 ,答题页关于每种 ...
Vue中播放音频和语音合成
利用audio标签播放音频 1,把音频文件notify.mp3放到public目录, mp3 wav ogg 都放上兼不同的浏览器 2,添加如下标签 <audio controls ref=&q ...
VUE + howler.js 播放音频
VUE2 + howler.js 播放音频自动播放 <divid="audio_btn":class="audioClass"@click=" ...
VUE实现音频播放器方案（播放列表）
在项目中,需要对某个景点多个介绍音频文件进行播放,建立这个音频播放器还是费了不少周折.前几天在做音频文件上传与管理时时一次是单个文件的上传.加载与播放还是比较简单,网上有很多案例,找来看看基本上就会, ...
js 自动播放音频文件，报警提示音等
js 自动播放音频文件,报警提示音等谷歌浏览器的音频,默认是不能在页面载入时直接自动播放的. 至少需要用户点击一下页面,才可以播放音频,这个策略的目的是保证用户的体验感,如果每个页面都能在用户未接触 ...
python播放音频及playsound模块解除占用的3种方法
python播放音频文件及playsound模块解除占用的3种方法 pip install playsound 播放mp3文件 from playsound import playsound impo ...
iOS 9音频应用播放音频之iOS 9音频播放进度
iOS 9音频应用播放音频之iOS 9音频播放进度 iOS 9音频应用开发播放进度音频文件在播放后经过了多久以及还有多久才可以播放完毕,想必是用户所关注的问题.为了解决这一问题,在很多的音乐播放器中 ...

vue播放音频以及添加插槽

引言

audio播放音频

tempalte添加插槽

vue播放音频以及添加插槽相关推荐

最新文章

热门文章