diff --git a/docs/audio-player/index.md b/docs/audio-player/index.md
index 4437b3d..45842be 100644
--- a/docs/audio-player/index.md
+++ b/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
diff --git a/examples/src/views/audio-play-demo/AudioPlayDemo.vue b/examples/src/views/audio-play-demo/AudioPlayDemo.vue
index bb713ce..1b6e654 100644
--- a/examples/src/views/audio-play-demo/AudioPlayDemo.vue
+++ b/examples/src/views/audio-play-demo/AudioPlayDemo.vue
@@ -1,11 +1,14 @@
-
+
@@ -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()
}
diff --git a/packages/bdsaas-bc/components/bc-audio/src/assets/close.png b/packages/bdsaas-bc/components/bc-audio/src/assets/close.png
new file mode 100644
index 0000000..478bb31
Binary files /dev/null and b/packages/bdsaas-bc/components/bc-audio/src/assets/close.png differ
diff --git a/packages/bdsaas-bc/components/bc-audio/src/hooks/player.ts b/packages/bdsaas-bc/components/bc-audio/src/hooks/player.ts
index 8bc2fc0..1cd57f1 100644
--- a/packages/bdsaas-bc/components/bc-audio/src/hooks/player.ts
+++ b/packages/bdsaas-bc/components/bc-audio/src/hooks/player.ts
@@ -6,7 +6,17 @@ function initHtml() {
if (!document.getElementById('audioPlayer')) {
document.body.insertAdjacentHTML(
'beforeend',
- ''
+ ``
)
}
}
@@ -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()
+ }
+ })
+ }
}
+
diff --git a/packages/bdsaas-bc/components/bc-audio/src/index.vue b/packages/bdsaas-bc/components/bc-audio/src/index.vue
index eaa46ef..d329410 100644
--- a/packages/bdsaas-bc/components/bc-audio/src/index.vue
+++ b/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'],
diff --git a/packages/bdsaas-bc/components/bc-audio/style/index.less b/packages/bdsaas-bc/components/bc-audio/style/index.less
index 884b72f..c98295b 100644
--- a/packages/bdsaas-bc/components/bc-audio/style/index.less
+++ b/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 {