【sgAudioDialog】自定义组件：基于audio标签和el-dialog构建弹窗预览音频文件

sgAudioDialog源码

<template>
  <div :class="$options.name" v-if="visible">
    <!-- 如果不加v-if="visible"弹窗中使用el-tabs组件就会死循环卡死，这个是elementUI的bug -->
    <el-dialog
      :append-to-body="true"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
      :custom-class="`${$options.name}-el-dialog`"
      :destroy-on-close="true"
      :fullscreen="false"
      :show-close="true"
      :title="`${form.name || `音频`}`"
      :top="`calc(100vh / 2 - 70px)`"
      :width="`500px`"
      :visible.sync="visible"
      @keyup.ctrl.enter.native="save"
      style="animation: none"
      v-loading="loading"
      :element-loading-text="elementLoadingText"
    >
      <div class="audio-container">
        <!-- 弹窗内容 -->
        <audio
          :autoplay="typeof form.autoplay === 'undefined' ? true : form.autoplay"
          class="audio"
          controls
          :loop="form.loop"
          :muted="form.muted"
          preload
          ref="audio"
          :src="form.src"
          webkit-playsinline="true"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "sgAudioDialog",
  components: {},
  data() {
    return {
      loading: false, //加载状态
      elementLoadingText: ``, //加载提示文字

      visible: false,
      form: {}, //表单信息
      disabled: false, //是否只读
      labelWidth: `120px`,
    };
  },
  props: ["value", "data"],
  computed: {},
  watch: {
    loading(newValue, oldValue) {
      newValue || (this.elementLoadingText = ``);
    },
    value: {
      handler(d) {
        this.visible = d;
      },
      deep: true,
      immediate: true,
    },
    visible(d) {
      this.$emit("input", d);
      // 每次显示的时候，重置一些参数值
      if (d) {
      }
    },
    data: {
      handler(newValue, oldValue) {
        //console.log(`深度监听${this.$options.name}：`, newValue, oldValue);
        if (Object.keys(newValue || {}).length) {
          this.form = JSON.parse(JSON.stringify(newValue));
          this.disabled = this.form.disabled;
        } else {
          this.disabled = false; //添加的时候，编辑态
          this.form = {
            // 默认字段名: 缺省值,
          };
        }
      },
      deep: true, //深度监听
      immediate: true, //立即执行
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    valid(d) {
      if (!this.form.NAME) return this.$message.error(this.$refs.NAME.$attrs.placeholder);
    },
    save() {
      if (this.valid()) return;
      if (this.form.ID) {
        // 修改
      } else {
        // 添加
      }
      let data = {
        ...this.form,
        sgLog: `前端请求来源：${this.$options.name}添加或修改`,
      };
      this.$f.保存数据接口调用方法(
        {
          ...data,
          cb: (d) => {
            this.$emit(`save`, this.form);
            this.cancel();
          },
        },
        this
      );
    },
    cancel() {
      this.visible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.sgAudioDialog {
}

.el-dialog__wrapper {
  /*遮罩模糊*/
  backdrop-filter: blur(5px);
}
>>> .sgAudioDialog-el-dialog {
  border-radius: 30px;
  box-shadow: 0 10px 50px 0 #00000033;
  //关闭按钮
  .el-dialog__headerbtn {
    .el-dialog__close {
      background-color: #409eff;
      border-radius: 88px;
      box-sizing: border-box;
      padding: 5px;
      color: white;
    }
    &:hover {
      .el-dialog__close {
        background-color: #1f75d5;
        color: white;
      }
    }
  }
  .audio-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -20px 0px -10px;
    border-radius: 20px;
    overflow: hidden;
    height: calc(100vh - 180px);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 60px;
    overflow: hidden;
    .audio {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

应用

<sgAudioDialog :data="data_sgAudioDialog" v-model="show_sgAudioDialog" />
 
data_sgAudioDialog: {src:`音频路径`, name:`音频标题`,},
show_sgAudioDialog: false,