<template>
  <div>
    <el-button
      @click="dialogToggle"
      size="mini" type="primary" plain>录音</el-button>
    <el-dialog title="录音播放" append-to-body :visible.sync="dialog.show" width="500px">
      <audio ref="recordAudio" style="display: block; width: 100%;" :src="src" controls preload="metadata"></audio>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "PhoneRecord",
    props: {
      src: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        dialog: {
          show: false
        }
      }
    },
    watch: {
      'dialog.show'(value) {
        if (!value) {
          this.$refs['recordAudio'].pause()
        }
      }
    },
    methods: {
      dialogToggle() {
        this.dialog.show = !this.dialog.show;

      }
    }
  }
</script>

<style>

</style>
