Compare commits
No commits in common. "1a7e373aa1aa5f6fd003133b0c41e0e8e0faf174" and "2112870a8b710fc06be400ca51096ca4401c6451" have entirely different histories.
1a7e373aa1
...
2112870a8b
@ -1,4 +1,4 @@
|
|||||||
export function createElement({ innerText, textContent, onclick, onchange, ondrop, ondragover, ondragleave, onkeydown, onmouseenter, onmouseleave, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
|
export function createElement({ innerText, textContent, onclick, onchange, onkeydown, onmouseenter, onmouseleave, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
|
||||||
const element = document.createElement(tagName)
|
const element = document.createElement(tagName)
|
||||||
for (const key in attributes) element.setAttribute(key, attributes[key])
|
for (const key in attributes) element.setAttribute(key, attributes[key])
|
||||||
if (style) Object.assign(element.style, style)
|
if (style) Object.assign(element.style, style)
|
||||||
@ -13,9 +13,6 @@ export function createElement({ innerText, textContent, onclick, onchange, ondro
|
|||||||
if (children) children.forEach(child => element.appendChild(child))
|
if (children) children.forEach(child => element.appendChild(child))
|
||||||
if (onmouseenter) element.onmouseenter = onmouseenter
|
if (onmouseenter) element.onmouseenter = onmouseenter
|
||||||
if (onmouseleave) element.onmouseleave = onmouseleave
|
if (onmouseleave) element.onmouseleave = onmouseleave
|
||||||
if (ondrop) element.ondrop = ondrop
|
|
||||||
if (ondragover) element.ondragover = ondragover
|
|
||||||
if (ondragleave) element.ondragleave = ondragleave
|
|
||||||
return element
|
return element
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -46,8 +43,7 @@ export function Avatar(options) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function UploadMusic(options) {
|
export function UploadMusic(options) {
|
||||||
let dragStats = null
|
const text = createElement({
|
||||||
const drop = createElement({
|
|
||||||
textContent: '点击或拖拽音乐到此处共享您的音乐',
|
textContent: '点击或拖拽音乐到此处共享您的音乐',
|
||||||
style: {
|
style: {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
@ -91,37 +87,10 @@ export function UploadMusic(options) {
|
|||||||
input.click()
|
input.click()
|
||||||
},
|
},
|
||||||
onmouseenter: event => {
|
onmouseenter: event => {
|
||||||
drop.style.display = 'block'
|
text.style.display = 'block'
|
||||||
},
|
},
|
||||||
onmouseleave: event => {
|
onmouseleave: event => {
|
||||||
drop.style.display = 'none'
|
text.style.display = 'none'
|
||||||
},
|
|
||||||
ondragover: event => {
|
|
||||||
console.log('dragover')
|
|
||||||
event.preventDefault()
|
|
||||||
event.stopPropagation()
|
|
||||||
if(dragStats) return
|
|
||||||
event.dataTransfer.dropEffect = 'copy'
|
|
||||||
drop.style.display = 'block'
|
|
||||||
},
|
|
||||||
ondragleave: event => {
|
|
||||||
event.preventDefault()
|
|
||||||
event.stopPropagation()
|
|
||||||
if(dragStats) return
|
|
||||||
clearTimeout(dragStats)
|
|
||||||
dragStats = setTimeout(() => {
|
|
||||||
drop.style.display = 'none'
|
|
||||||
dragStats = null
|
|
||||||
}, 1000)
|
|
||||||
},
|
|
||||||
ondrop: event => {
|
|
||||||
console.log('drop')
|
|
||||||
event.preventDefault()
|
|
||||||
event.stopPropagation()
|
|
||||||
const files = Array.from(event.dataTransfer.files)
|
|
||||||
if (files.length === 0) return console.log('没有文件')
|
|
||||||
console.log('files', files)
|
|
||||||
options.onchange(files)
|
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
// 绘制一个云朵上传图标(别放弃...还有我呢!)
|
// 绘制一个云朵上传图标(别放弃...还有我呢!)
|
||||||
@ -172,7 +141,7 @@ export function UploadMusic(options) {
|
|||||||
})
|
})
|
||||||
]
|
]
|
||||||
}),
|
}),
|
||||||
drop
|
text
|
||||||
//createElement({
|
//createElement({
|
||||||
// style: {
|
// style: {
|
||||||
// position: 'absolute',
|
// position: 'absolute',
|
||||||
|
Loading…
Reference in New Issue
Block a user