feat: 歌单内元素懒加载

src/components/miaoLazyDiv.vue

@@ -1,15 +1,20 @@
 <!-- 只适合用于渲染过程较为复杂的组件，不然可能得不偿失
      这么泛用的组件，性能差点也能理解 -->
 <template>
-    <div class="miao-lazy" ref="miaoLazyRoot" :style="!show ? { minHeight, minWidth, margin } : {}">
+    <div class="miao-lazy" ref="miaoLazyRoot"
+        :style="!show ? { minHeight: _autoHeight !== undefined ? _autoHeight : props.minHeight, minWidth, margin } : {}">
         <slot v-if="show" />
     </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
 
 const props = defineProps({
+    // disable: {
+    //     type: Boolean,
+    //     default: false,
+    // },
     disableLazy: {
         type: Boolean,
         default: false,
@@ -26,11 +31,17 @@ const props = defineProps({
     margin: {
         type: String,
         default: 'none',
+    },
+    autoHeight: {
+        type: Boolean,
+        default: false
     }
 })
 
 const miaoLazyRoot = ref<HTMLDivElement>()
 
+const _autoHeight = ref<string>()
+
 const show = ref<boolean>(props.disableLazy)
 
 const isVisible = (dom: HTMLDivElement) => {
@@ -49,6 +60,9 @@ const { showSlot, hideSlot, clearTimer } = (() => {
     }
     const hideSlot = () => {
         clearTimer()
+        if (props.autoHeight) {
+            _autoHeight.value = `${miaoLazyRoot.value?.clientHeight}px`
+        }
         show.value = false
     }
     const showSlot = () => {
@@ -69,7 +83,12 @@ const { showSlot, hideSlot, clearTimer } = (() => {
                 hideSlot()
             }
         }, 1000)
+        // if (props.autoHeight) {
+        //     nextTick(() => {
+        //         console.log(miaoLazyRoot.value?.clientHeight)
+        //         _autoHeight.value = `${miaoLazyRoot.value?.clientHeight}px`
         //     })
+        // }
     }
     return { showSlot, hideSlot, clearTimer }
 })()

src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue

@@ -1,5 +1,6 @@
 <template>
     <miao-drop-handler @on-virtual-files="handleDropVFiles">
+        <miao-alertTip-provider ref="miaoMessageRef">
             <div class="miaoMusic-container">
                 <NScrollbar>
                     <div class="miaoMusic-main">
@@ -7,11 +8,13 @@
                 </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)))
+    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) => ({
@@ -74,7 +86,7 @@ onMounted(() => {
         const _name = ap.list.audios[index].name
         currentFiles.value = currentFiles.value.filter(v => v.name !== _name)
     })
-    console.log({ ap, vueApp })
+    // console.log({ ap, vueApp })
 });
 
 onUnmounted(() => {

src/plugins/miaoMusicPlayer/src/aplayerListNew.vue

@@ -2,8 +2,8 @@
     <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"
+            <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>
@@ -34,6 +34,7 @@
                     <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>