feat: 歌单内元素懒加载

src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue

@@ -1,17 +1,20 @@
 <template>
     <miao-drop-handler @on-virtual-files="handleDropVFiles">
-        <div class="miaoMusic-container">
-            <NScrollbar>
-                <div class="miaoMusic-main">
-                </div>
-            </NScrollbar>
-            <div ref="aplayer" />
-        </div>
+        <miao-alertTip-provider ref="miaoMessageRef">
+            <div class="miaoMusic-container">
+                <NScrollbar>
+                    <div class="miaoMusic-main">
+                    </div>
+                </NScrollbar>
+                <div ref="aplayer" />
+            </div>
+        </miao-alertTip-provider>
     </miao-drop-handler>
 </template>
 
 <script setup lang="ts">
 import miaoDropHandler from '@/components/miaoDropHandler.vue'
+import miaoAlertTipProvider from '@/components/miaoAlertTipProvider.vue'
 import useAplayerMiao from './hooks/aplayerMiao';
 import { VirtualFile } from '@/class/VirtualDirectory';
 import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
@@ -23,13 +26,22 @@ import config from '@/config';
 import { difference, uniq } from 'lodash';
 import apType from './types/ap';
 
+const miaoMessageRef = ref<InstanceType<typeof miaoAlertTipProvider>>()
 
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
     required: true
 });
 
-watch(()=>currentFiles.value, (value, oldValue) => {
-    ap.list.add(getMusicList(difference(value, oldValue)))
+watch(() => currentFiles.value, (value, oldValue) => {
+    const diff = difference(value, oldValue)
+    if (diff.length > 0) {
+        const _s = `等${diff.length}个资源`
+        miaoMessageRef.value?.alertTip(`已添加 ${diff[0].name}${diff.length !== 1 ? _s : ''}`, {
+            type: 'success',
+            timeout: 3000
+        })
+        ap.list.add(getMusicList(diff))
+    }
 })
 
 const getMusicList = (mp3VFiles: VirtualFile[]) => mp3VFiles.map((v, index) => ({
@@ -69,12 +81,12 @@ onMounted(() => {
             disableDropReceiver.value = false
         },
     })
-	ap.on('listremove', (...args: any) => {
-        const {index} = args[0] as {index: number}
+    ap.on('listremove', (...args: any) => {
+        const { index } = args[0] as { index: number }
         const _name = ap.list.audios[index].name
-        currentFiles.value = currentFiles.value.filter(v=>v.name !== _name)
-	})
-    console.log({ ap, vueApp })
+        currentFiles.value = currentFiles.value.filter(v => v.name !== _name)
+    })
+    // console.log({ ap, vueApp })
 });
 
 onUnmounted(() => {

src/plugins/miaoMusicPlayer/src/aplayerListNew.vue

@@ -2,38 +2,39 @@
     <ol :style="{ maxHeight: ap.options.listMaxHeight }" :key="refreshKey" ref="ol">
         <VueDraggable v-model="ap.list.audios" @start="onDragStart" @end="onDragEnd" item-key="id"
             handle=".aplayer-list-control-btn-reorder" ghostClass="iSDragging" :animation="150">
-            <li v-for="(element, index) in ap.list.audios"
-                :class="activeAudioIndex == index ? 'aplayer-list-light' : ''" class="aplayer-list-new"
-                :key="element.id">
-                <span class="aplayer-list-cur" :style="{ backgroundColor: apTheme }"></span>
-                <span class="aplayer-list-index">{{ index + 1 }}</span>
-                <span class="aplayer-list-title">{{ element.name }}</span>
-                <div class="aplayer-list-control">
-                    <div class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
-                        @click.stop="switchAudio(index)">
-                        <PlayOutline class="aplayer-list-control-btn-svg" />
+            <miaoLazyDiv v-for="(element, index) in ap.list.audios" :min-height="'32px'" auto-height>
+                <li :class="activeAudioIndex == index ? 'aplayer-list-light' : ''" class="aplayer-list-new"
+                    :key="element.id">
+                    <span class="aplayer-list-cur" :style="{ backgroundColor: apTheme }"></span>
+                    <span class="aplayer-list-index">{{ index + 1 }}</span>
+                    <span class="aplayer-list-title">{{ element.name }}</span>
+                    <div class="aplayer-list-control">
+                        <div class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
+                            @click.stop="switchAudio(index)">
+                            <PlayOutline class="aplayer-list-control-btn-svg" />
+                        </div>
+                        <div class="aplayer-list-control-btn aplayer-list-control-btn-hover"
+                            @click.stop="switchAudio(index)" v-if="false">
+                            <HeartOutline class="aplayer-list-control-btn-svg" />
+                        </div>
+                        <div class="aplayer-list-control-btn" @click.stop="listAudioUp(index)" v-if="false">
+                            <ChevronUpOutline class="aplayer-list-control-btn-svg" />
+                        </div>
+                        <div class="aplayer-list-control-btn" @click.stop="listAudioDown(index)" v-if="false">
+                            <ChevronDownOutline class="aplayer-list-control-btn-svg" />
+                        </div>
+                        <div class="aplayer-list-control-btn aplayer-list-control-btn-hover"
+                            @click.stop="listAudioRemove(index)">
+                            <CloseOutline class="aplayer-list-control-btn-svg" />
+                        </div>
+                        <div class="aplayer-list-control-btn aplayer-list-control-btn-reorder">
+                            <ReorderFourOutline class="aplayer-list-control-btn-svg" />
+                        </div>
                     </div>
-                    <div class="aplayer-list-control-btn aplayer-list-control-btn-hover"
-                        @click.stop="switchAudio(index)" v-if="false">
-                        <HeartOutline class="aplayer-list-control-btn-svg" />
-                    </div>
-                    <div class="aplayer-list-control-btn" @click.stop="listAudioUp(index)" v-if="false">
-                        <ChevronUpOutline class="aplayer-list-control-btn-svg" />
-                    </div>
-                    <div class="aplayer-list-control-btn" @click.stop="listAudioDown(index)" v-if="false">
-                        <ChevronDownOutline class="aplayer-list-control-btn-svg" />
-                    </div>
-                    <div class="aplayer-list-control-btn aplayer-list-control-btn-hover"
-                        @click.stop="listAudioRemove(index)">
-                        <CloseOutline class="aplayer-list-control-btn-svg" />
-                    </div>
-                    <div class="aplayer-list-control-btn aplayer-list-control-btn-reorder">
-                        <ReorderFourOutline class="aplayer-list-control-btn-svg" />
-                    </div>
-                </div>
-                <span class="aplayer-list-author" v-show="element.artist !== 'Audio artist1'">{{ element.artist
-                    }}</span>
-            </li>
+                    <span class="aplayer-list-author" v-show="element.artist !== 'Audio artist1'">{{ element.artist
+                        }}</span>
+                </li>
+            </miaoLazyDiv>
         </VueDraggable>
     </ol>
 </template>
@@ -42,6 +43,7 @@
 import { computed, nextTick, onMounted, ref } from 'vue';
 import { ChevronUpOutline, ChevronDownOutline, CloseOutline, ReorderFourOutline, PlayOutline, HeartOutline } from '@vicons/ionicons5';
 import { VueDraggable } from 'vue-draggable-plus'
+import miaoLazyDiv from '@/components/miaoLazyDiv.vue';
 import apType, { audioType } from '../types/ap';
 
 const props = defineProps<{
@@ -148,7 +150,7 @@ const { onDragStart, onDragEnd } = (() => {
 // }
 
 onMounted(() => {
-    console.log(props.ap)
+    // console.log(props.ap)
 })
 </script>