diff --git a/src/music.js b/src/music.js index 85d276a..785ed57 100644 --- a/src/music.js +++ b/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则此处不能阻止冒泡传递