vue 自定义报警组件

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.效果图