Compare commits

..

No commits in common. "1a7e373aa1aa5f6fd003133b0c41e0e8e0faf174" and "2112870a8b710fc06be400ca51096ca4401c6451" have entirely different histories.

View File

@ -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',