1.自定义报警组件
Alarm.vue
<!-- 报警 组件 -->
<template>
<div class="alarm">
<!-- <video src="../assets/mp3/6705.mp3" controls="controls">
您的浏览器不支持 video 标签。
</video> --> <audio id="myAudio" loop>
<source :src="url" type="audio/mpeg">
</audio> <!-- <audio id="myAudio" loop>
<source v-if="number == 2370" src="../assets/mp3/2370.mp3" type="audio/mpeg">
<source v-if="number == 4031" src="../assets/mp3/4031.mp3" type="audio/mpeg">
<source v-if="number == 6705" src="../assets/mp3/6705.mp3" type="audio/mpeg">
</audio> -->
</div>
</template> <script>
/**
* audio 属性详解
* controls 显示或隐藏用户控制界面
* autoplay 是否自动播放(加载时播放,仅播放一次)
* loop 是否循环播放
* preload 是否预加载
*/
export default {
props: {
onOff: { // 报警开关
type: Boolean,
default: false
},
number: {
type: Number,
default: 6705
}
},
data() {
return {
url: require('../assets/mp3/6705.mp3')
}
},
watch:{
onOff: {
handler: function (val, oldVal) {
if(val){
document.getElementById('myAudio').play();
}else{
document.getElementById('myAudio').pause();
}
},
deep: true
}
},
methods: {
//
}
}
</script> <style lang="less" scoped>
.alarm {
//
}
</style>
2.页面调用
Setting.vue
<!-- 设置 -->
<template>
<div>
<!-- 标题栏 -->
<x-header title="设置"></x-header>
<!-- 内容部分 -->
<box gap="10px 10px">
<x-button type="primary" @click.native="startAlarm">开启报警</x-button>
<x-button type="warn" @click.native="stopAlarm">结束报警</x-button>
</box> <m-alarm
:onOff="onOff"
></m-alarm>
</div>
</template> <script>
import { XHeader, Box, XButton } from 'vux'
// 引入报警组件
import mAlarm from '../../components/Alarm.vue' export default {
name: 'Setting',
components: {
XHeader,
Box,
XButton,
mAlarm,
},
data(){
return {
onOff: false
}
},
methods: {
startAlarm(){
console.log('开启');
this.onOff = true;
},
stopAlarm(){
console.log('关闭');
this.onOff = false;
}
}
}
</script> <style lang="less" scoped>
.content{
position: absolute;
top: 46px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: scroll;
}
/*隐藏 滚动条*/
::-webkit-scrollbar{
display:none;
}
</style>
3.效果图