feat: ✨播放音频组件增加可配置的关闭功能

docs/audio-player/index.md

@@ -15,6 +15,11 @@
 | btnName | String | 非必传 | '播放' | 按钮名称 |
 | showErrorMsg | Boolean | 非必传 | false | 是否显示错误提示 |
 | inline  | Boolean | 非必传 | false | 是否行内块 |
+| showClose | Boolean | 非必传 | false | 是否显示关闭按钮 |
+| closeOnClickOutSide | Boolean | 非必传 | false | 是否允许点击其他区域关闭播放器 |
+| unCloseClass | String | 非必传 | 'un-close-class' | 点击后不关闭播放器的class |
+
+> 说明unCloseClass: 点击后不关闭播放器的class，当点击的元素有此class时，不关闭播放器。处理的是使用ref调用播放器方法时会使用自定义按钮，此按钮并不在播放器或播放器组件范围内，当closeOnClickOutSide为true时，点击此按钮会关闭播放器，此时可以使用此class来阻止关闭播放器。不传的时候直接在元素上添加这个'un-close-class'即可。
 
 ### Methods
 

examples/src/views/audio-play-demo/AudioPlayDemo.vue

@@ -1,11 +1,14 @@
 <template>
   <div>
-    <button @click="changeSrcAndName">change</button>
+    <button class="extra-class" @click="changeSrcAndName">播放</button>
     <BcAudio
       ref="BcAudioRef"
       :src="src"
       :name="name"
       :showBtn="false"
+      unCloseClass="extra-class"
+      closeOnClickOutside
+      showClose
     />
   </div>
 </template>
@@ -23,7 +26,7 @@ const name = ref('')
 
 const changeSrcAndName = () => {
   src.value = 'https://demo.bdsaas.cn/call_record/2023/07/06/1564/bf1b017f37d8495d8f824e57949d4fa8..wav'
-  name.value = '金卡跨境电商看见你电脑开机啊苏卡达缴纳卡机奶萨到哪科技'
+  name.value = '测试'
   BcAudioRef.value.play()
 }
 

packages/bdsaas-bc/components/bc-audio/src/hooks/player.ts

@@ -6,7 +6,17 @@ function initHtml() {
   if (!document.getElementById('audioPlayer')) {
     document.body.insertAdjacentHTML(
       'beforeend',
-      '<div class="audio-player-wrap"><div id="audioPlayer"></div></div>'
+      `<div class="audio-player-wrap"><div id="audioPlayer"></div><div class="audio-player-close hide"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">  <image id="image0" width="48" height="48" x="0" y="0"
+    xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAIGNIUk0AAHomAACAhAAA+gAAAIDo
+AAB1MAAA6mAAADqYAAAXcJy6UTwAAAAnUExURQAAADY8QDc9QTY8Qjc9QDc9QzY8QDc9QT09PTk5
+RzU6QDc9Qf///0QN3EUAAAALdFJOUwB/31WqKoDUFRIwWd4eaAAAAAFiS0dEDIGzUWMAAAAHdElN
+RQfoAhcDGDbOKryQAAAAmElEQVQ4y+3RMQqAMAwF0IItiJN4DRd3F/cubq69hKC4eCURdejlrJIW
+0v7F3UyBz0PzK8Q/H6dq/CY7FtS73/TBgtYSkdawILNE9Bl9hEgMAkkAkRQQ0Rs4xRFpSxA4AsFD
+IHgIBu6Xrh4G+lxGDMwAiTtaIfIejcjbEiDUUkqo1oSEWmMS3kEtEw+M34aZBUXY8lX883FulZsv
+qoOCPNsAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjQtMDItMjNUMDM6MjQ6NTMrMDA6MDBMOLa6AAAA
+JXRFWHRkYXRlOm1vZGlmeQAyMDI0LTAyLTIzVDAzOjI0OjUzKzAwOjAwPWUOBgAAACh0RVh0ZGF0
+ZTp0aW1lc3RhbXAAMjAyNC0wMi0yM1QwMzoyNDo1NCswMDowMK/XEVcAAAAASUVORK5CYII=" />
+</svg></div></div>`
     )
   }
 }
@@ -15,6 +25,8 @@ export function audioDestory() {
   if (audioPlayer) {
     audioPlayer.destroy()
     audioPlayer = null
+    const element = document.getElementById('audioPlayer')?.nextElementSibling
+    element?.classList.add('hide')
   }
 }
 
@@ -74,4 +86,46 @@ export function audioPlay(props: any, emit: any) {
     }
     audioDestory()
   })
+
+  // 点击按钮audio-player-close关闭音频播放器
+  const audioPlayerClose =
+    document.getElementById('audioPlayer')?.nextElementSibling
+  // 移除hide类名
+  if (props.showClose) {
+    audioPlayerClose?.classList.remove('hide')
+  }
+  // 先移除事件，再添加事件，避免重复绑定
+  audioPlayerClose?.removeEventListener('click', () => {
+    console.log('移除事件')
+    audioDestory()
+  })
+  audioPlayerClose?.addEventListener('click', () => {
+    console.log('关闭音频播放器')
+    audioDestory()
+  })
+
+  // 点击其他区域关闭音频播放器
+  // 先移除事件，再添加事件，避免重复绑定
+  document.removeEventListener('click', () => {
+    console.log('移除事件')
+  })
+
+  if (props.closeOnClickOutside) {
+    // 点击其他区域关闭音频播放器
+    document.addEventListener('click', e => {
+      // #audioPlayer .audio-player-close .bc-audio-btn 以及传入的prop.unCloseClass都不会关闭音频播放器
+      if (
+        !document.getElementById('audioPlayer')?.contains(e.target as Node) &&
+        !audioPlayerClose?.contains(e.target as Node) &&
+        !document.querySelector('.bc-audio-btn')?.contains(e.target as Node) &&
+        !document
+          .querySelector('.' + props.unCloseClass)
+          ?.contains(e.target as Node)
+      ) {
+        console.log('关闭音频播放器')
+        audioDestory()
+      }
+    })
+  }
 }
+

packages/bdsaas-bc/components/bc-audio/src/index.vue

@@ -63,6 +63,22 @@ export default defineComponent({
       // 是否行内展示
       type: Boolean,
       default: false
+    },
+    // 属于播放区域的额外类名
+    unCloseClass: {
+      // 额外类名
+      type: String,
+      default: 'un-close-class'
+    },
+    // 显示关闭按钮
+    showClose: {
+      type: Boolean,
+      default: false
+    },
+    // 点击区域外关闭
+    closeOnClickOutside: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['afterPlay', 'afterError'],

packages/bdsaas-bc/components/bc-audio/style/index.less

@@ -4,6 +4,23 @@
   right: 10px;
   z-index: 9999;
   width: 320px;
+
+  .audio-player-close {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+    cursor: pointer;
+
+    > svg {
+      width: 20px;
+      height: 20px;
+      font-size: 20px;
+    }
+
+    &.hide {
+      display: none;
+    }
+  }
 }
 
 .bc-audio-btn {