播放器可自由拖动大小
This commit is contained in:
parent
f688f6e1b1
commit
277e2dd5b9
21
src/music.js
21
src/music.js
@ -8,6 +8,7 @@ export default class MusicList {
|
||||
this.audio = new Audio()
|
||||
this.audio.autoplay = true
|
||||
this.audio.controls = true
|
||||
this.audio.style.margin = '0 auto'
|
||||
this.audio.style.flexShrink = 0 // 防止在flex中被挤压变形
|
||||
this.audio.addEventListener('play', () => {
|
||||
this.event.onplay(this.playing)
|
||||
@ -43,19 +44,31 @@ export default class MusicList {
|
||||
position: 'fixed', top: '5rem', right: '1rem',
|
||||
backgroundColor: '#fff', padding: '.5rem',
|
||||
borderRadius: '1rem', cursor: 'pointer',
|
||||
maxWidth: '20rem', maxHeight: '70vh',
|
||||
width: '20rem', Height: '70vh',
|
||||
minWidth: '20rem', minHeight: '13rem',
|
||||
maxWidth: '80vw', maxHeight: '80vh',
|
||||
overflow: 'hidden', boxShadow: '0 0 1rem #eee',
|
||||
display: 'flex', flexDirection: 'column',
|
||||
fontSize: '12px', userSelect: 'none',
|
||||
zIndex: '10',
|
||||
zIndex: '10', resize: 'auto',
|
||||
},
|
||||
onclick: event => {
|
||||
this.ul.classList.toggle('disable')
|
||||
},
|
||||
onmousedown({ srcElement: dom, clientX, clientY }) {
|
||||
onmousedown({ srcElement: dom, clientX, clientY, offsetX, offsetY }) {
|
||||
if (dom !== element) return
|
||||
const [w, h] = [innerWidth - dom.offsetWidth, innerWidth - dom.offsetHeight]
|
||||
if (offsetX > dom.clientWidth - 20 && offsetY > dom.clientHeight - 20) {
|
||||
document.onmouseup = () => {
|
||||
const [w, h] = [innerWidth - dom.clientWidth, innerHeight - dom.clientHeight]
|
||||
if (dom.offsetLeft > w) dom.style.width = innerWidth - dom.offsetLeft + 'px'
|
||||
if (dom.offsetTop > h) dom.style.height = innerHeight - dom.offsetTop + 'px'
|
||||
document.onmouseup = null
|
||||
localStorage.setItem('playerWH', dom.style.width + ',' + dom.style.height)
|
||||
}
|
||||
return
|
||||
}
|
||||
document.onmouseup = () => {
|
||||
const [w, h] = [innerWidth - dom.clientWidth, innerHeight - dom.clientHeight]
|
||||
if (dom.offsetLeft < 0) dom.style.left = '0px'
|
||||
if (dom.offsetTop < 0) dom.style.top = '0px'
|
||||
if (dom.offsetLeft > w) dom.style.left = w + 'px'
|
||||
|
Loading…
Reference in New Issue
Block a user