|
|
@@ -2,16 +2,23 @@
|
|
|
<div class="audio_area" :style="getAreaStyle()">
|
|
|
<SerialNumberPosition :property="data.property" />
|
|
|
|
|
|
- <div class="main">
|
|
|
- <ul v-if="'list' === data.property.view_method" class="view_list">
|
|
|
+ <div ref="audioArea" class="main">
|
|
|
+ <ul v-if="'independent' === data.property.view_method" class="view-independent">
|
|
|
<li v-for="(file, i) in data.file_list" :key="i">
|
|
|
- <AudioPlay view-size="small" :file-id="file.file_id" :audio-index="i" view-method="list" />
|
|
|
+ <AudioPlay
|
|
|
+ view-size="middle"
|
|
|
+ :file-id="file.file_id"
|
|
|
+ :file-name="file.file_name.slice(0, file.file_name.lastIndexOf('.'))"
|
|
|
+ :audio-index="i"
|
|
|
+ />
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <div
|
|
|
- v-if="'independent' === data.property.view_method || 'icon' === data.property.view_method"
|
|
|
- class="view_independent"
|
|
|
- >
|
|
|
+ <ul v-else-if="'icon' === data.property.view_method" class="view-icon">
|
|
|
+ <li v-for="(file, i) in data.file_list" :key="i">
|
|
|
+ <AudioPlay view-size="small" :file-id="file.file_id" :audio-index="i" />
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div v-else class="view-list">
|
|
|
<el-carousel
|
|
|
ref="audio_carousel"
|
|
|
indicator-position="none"
|
|
|
@@ -23,23 +30,27 @@
|
|
|
<AudioPlay
|
|
|
view-size="big"
|
|
|
:file-id="file.file_id"
|
|
|
+ :file-name="file.file_name.slice(0, file.file_name.lastIndexOf('.'))"
|
|
|
:show-slider="true"
|
|
|
:cur-audio-index="curAudioIndex"
|
|
|
@changeFile="changeFile"
|
|
|
/>
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
- <ul class="view_independent_list">
|
|
|
- <li v-for="(file, i) in data.file_list" :key="i" @click="handleAudioClick(i)">
|
|
|
- <AudioPlay
|
|
|
- view-size="small"
|
|
|
- :file-id="file.file_id"
|
|
|
- :show-slider="false"
|
|
|
- :audio-index="i"
|
|
|
- :cur-audio-index="curAudioIndex"
|
|
|
- />
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <div :style="{ height: elementHeight - 140 + 'px', overflowY: viewScroll }">
|
|
|
+ <ul class="view-list-bottom">
|
|
|
+ <li v-for="(file, i) in data.file_list" :key="i" @click="handleAudioClick(i)">
|
|
|
+ <AudioPlay
|
|
|
+ view-size="list"
|
|
|
+ :file-id="file.file_id"
|
|
|
+ :file-name="file.file_name.slice(0, file.file_name.lastIndexOf('.'))"
|
|
|
+ :show-slider="false"
|
|
|
+ :audio-index="i"
|
|
|
+ :cur-audio-index="curAudioIndex"
|
|
|
+ />
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -59,10 +70,53 @@ export default {
|
|
|
return {
|
|
|
data: getAudioData(),
|
|
|
curAudioIndex: 0,
|
|
|
+ elementWidth: 0,
|
|
|
+ elementHeight: 0,
|
|
|
+ fileLen: 0,
|
|
|
+ resizeObserver: null, // ResizeObserver 实例，用于监听元素大小变化
|
|
|
+ viewScroll: 'hidden',
|
|
|
};
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ data: {
|
|
|
+ handler(val) {
|
|
|
+ this.fileLen = val.file_list.length;
|
|
|
+ if (this.fileLen > 0 && this.data.property.view_method === 'list') {
|
|
|
+ const ele = this.$refs.audioArea;
|
|
|
+ this.elementWidth = ele.clientWidth;
|
|
|
+ this.elementHeight = ele.clientHeight;
|
|
|
+
|
|
|
+ window.addEventListener('resize', this.handleResize);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ elementWidth(newWidth, oldWidth) {
|
|
|
+ this.elementWidth = newWidth;
|
|
|
+ },
|
|
|
+ elementHeight(newHeight, oldHeight) {
|
|
|
+ this.elementHeight = newHeight;
|
|
|
+ this.isViewScroll();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let _class = document.querySelector('.canvas');
|
|
|
+ if (_class === null) return;
|
|
|
+ if (_class.classList.contains('canvas')) {
|
|
|
+ this.resizeObserver = new ResizeObserver((entries) => {
|
|
|
+ for (let entry of entries) {
|
|
|
+ this.elementWidth = entry.contentRect.width;
|
|
|
+ this.elementHeight = entry.contentRect.height;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.resizeObserver.observe(this.$el);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
methods: {
|
|
|
handleAudioClick(index) {
|
|
|
+ console.log(this.data.file_list);
|
|
|
// 获取 Carousel 实例
|
|
|
const carousel = this.$refs.audio_carousel;
|
|
|
// 切换到对应索引的文件
|
|
|
@@ -87,6 +141,14 @@ export default {
|
|
|
this.curAudioIndex = this.data.file_id_list.length - 1;
|
|
|
}
|
|
|
},
|
|
|
+ isViewScroll() {
|
|
|
+ const ulHeight = this.fileLen * 44;
|
|
|
+ if (ulHeight > this.elementHeight - 140) {
|
|
|
+ this.viewScroll = 'scroll';
|
|
|
+ } else {
|
|
|
+ this.viewScroll = 'hidden';
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -109,32 +171,33 @@ export default {
|
|
|
grid-area: main;
|
|
|
width: 100%;
|
|
|
|
|
|
- .view_list {
|
|
|
+ .view-independent {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- gap: 20px 2%;
|
|
|
- width: 100%;
|
|
|
+ gap: 16px;
|
|
|
|
|
|
> li {
|
|
|
- flex: 0 0 23%;
|
|
|
- min-width: 120px;
|
|
|
- height: 46px;
|
|
|
+ min-width: 280px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .view_independent {
|
|
|
+ .view-icon {
|
|
|
display: flex;
|
|
|
- flex: 1;
|
|
|
- column-gap: 2%;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 16px 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .view-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
|
|
|
:deep .el-carousel {
|
|
|
flex: 1;
|
|
|
- padding: 20%;
|
|
|
- background-color: #d9d9d9;
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ border-radius: 4px;
|
|
|
|
|
|
&__container {
|
|
|
- height: 100px;
|
|
|
- margin: 0 auto;
|
|
|
+ height: 128px;
|
|
|
}
|
|
|
|
|
|
&__item {
|
|
|
@@ -142,13 +205,13 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .view_independent_list {
|
|
|
+ .view-list-bottom {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- row-gap: 2px;
|
|
|
- min-width: 200px;
|
|
|
- max-height: 500px;
|
|
|
- overflow: auto;
|
|
|
+
|
|
|
+ li {
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
zq
