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