鼠标悬停时气泡展示音乐信息

src/music.js

@@ -3,10 +3,6 @@ import { Span, Button, List, ListItem, UploadMusic, createElement } from './weig
 export default class MusicList {
     constructor({ list = [], EventListeners = {}, onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }) {
         this.event = { onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }
-        this.ul = List({ classList: ['music-list'] })
-        this.EventListeners = EventListeners
-        this.list = []
-        list.forEach(item => this.add(item)) // 列表逐一添加
 
         // 添加音乐播放器
         this.audio = new Audio()
@@ -26,10 +22,27 @@ export default class MusicList {
         //    console.error('音乐播放器错误:', event)
         //})
 
+        this.ul = List({
+            classList: ['music-list'],
+            style: {
+                // 文字溢出显示为省略号
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+            }
+        })
+        this.EventListeners = EventListeners
+        this.list = []
+        list.forEach(item => this.add(item)) // 列表逐一添加
+
         // 收起到右上角, 音乐播放器基于浮窗定位, 不再占用页面空间
         const element = createElement({
-            //textContent: '音乐',
-            style: { position: 'fixed', top: '5rem', right: '1rem', backgroundColor: '#eee', padding: '.5rem', borderRadius: '1rem', cursor: 'pointer' },
+            style: {
+                position: 'fixed', top: '5rem', right: '1rem',
+                backgroundColor: '#eee', padding: '.5rem',
+                borderRadius: '1rem', cursor: 'pointer',
+                maxWidth: '20rem', maxHeight: '70vh',
+            },
             onclick: event => {
                 this.ul.classList.toggle('disable')
             },
@@ -112,6 +125,7 @@ export default class MusicList {
             classList: item.arrayBuffer ? ['cache'] : [],
             children: [
                 Span({
+                    title: `${item.name} - ${bytesToSize(item.size)} - ${item.type}`,
                     textContent: `${item.name} - ${bytesToSize(item.size)}`,
                     onclick: event => {
                         event.stopPropagation()                // !如果使用async则此处不能阻止冒泡传递