换上云朵
This commit is contained in:
parent
50985470e1
commit
2112870a8b
|
|
@ -1,4 +1,4 @@
|
||||||
export function createElement({ innerText, textContent, onclick, onchange, onkeydown, 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)
|
||||||
|
|
@ -11,6 +11,8 @@ export function createElement({ innerText, textContent, onclick, onchange, onkey
|
||||||
if (onclick) element.onclick = onclick
|
if (onclick) element.onclick = onclick
|
||||||
if (dataset) Object.assign(element.dataset, dataset)
|
if (dataset) Object.assign(element.dataset, dataset)
|
||||||
if (children) children.forEach(child => element.appendChild(child))
|
if (children) children.forEach(child => element.appendChild(child))
|
||||||
|
if (onmouseenter) element.onmouseenter = onmouseenter
|
||||||
|
if (onmouseleave) element.onmouseleave = onmouseleave
|
||||||
return element
|
return element
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -41,6 +43,18 @@ export function Avatar(options) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function UploadMusic(options) {
|
export function UploadMusic(options) {
|
||||||
|
const text = createElement({
|
||||||
|
textContent: '点击或拖拽音乐到此处共享您的音乐',
|
||||||
|
style: {
|
||||||
|
width: '100%',
|
||||||
|
color: '#999',
|
||||||
|
lineHeight: '5rem',
|
||||||
|
textAlign: 'center',
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
display: 'none'
|
||||||
|
}
|
||||||
|
})
|
||||||
return createElement({
|
return createElement({
|
||||||
...options,
|
...options,
|
||||||
style: {
|
style: {
|
||||||
|
|
@ -72,38 +86,92 @@ export function UploadMusic(options) {
|
||||||
})
|
})
|
||||||
input.click()
|
input.click()
|
||||||
},
|
},
|
||||||
|
onmouseenter: event => {
|
||||||
|
text.style.display = 'block'
|
||||||
|
},
|
||||||
|
onmouseleave: event => {
|
||||||
|
text.style.display = 'none'
|
||||||
|
},
|
||||||
children: [
|
children: [
|
||||||
// 绘制一个云朵上传图标(别放弃...还有我呢!)
|
// 绘制一个云朵上传图标(别放弃...还有我呢!)
|
||||||
createElement({
|
createElement({
|
||||||
style: {
|
style: {
|
||||||
position: 'absolute',
|
width: '82px',
|
||||||
top: '50%',
|
height: '30px',
|
||||||
left: '50%',
|
background: '#e7f4fd',
|
||||||
transform: 'translate(-50%, -50%)',
|
background: '-webkit-linear-gradient(top,#e7f4fd 5%,#ceedfd 100%)',
|
||||||
width: '4rem',
|
borderRadius: '25px',
|
||||||
height: '4rem',
|
position: 'relative',
|
||||||
backgroundColor: '#ff1414',
|
margin: '33px auto 5px'
|
||||||
borderRadius: '50%',
|
|
||||||
opacity: 0.2,
|
|
||||||
boxShadow: '-35px 10px 0 -10px, 33px 15px 0 -15px, 0 0 0 6px #fff, -35px 10px 0 -5px #fff, 33px 15px 0 -10px #fff;',
|
|
||||||
background: 'currentColor',
|
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
createElement({
|
createElement({
|
||||||
style: {
|
style: {
|
||||||
|
width: '45px',
|
||||||
|
height: '45px',
|
||||||
|
top: '-22px',
|
||||||
|
right: '12px',
|
||||||
|
borderRadius: '50px',
|
||||||
|
borderRadius: '25px',
|
||||||
|
background: '#e7f4fd',
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: '50%',
|
zIndex: '-1'
|
||||||
left: '50%',
|
|
||||||
transform: 'translate(-50%, -50%)',
|
|
||||||
width: '2rem',
|
|
||||||
height: '2rem',
|
|
||||||
backgroundColor: '#fff',
|
|
||||||
borderRadius: '50%',
|
|
||||||
boxShadow: '0 0 0 6px #fff, -35px 10px 0 -5px #fff, 33px 15px 0 -10px #fff;',
|
|
||||||
}
|
}
|
||||||
|
}),
|
||||||
|
createElement({
|
||||||
|
style: {
|
||||||
|
width: '25px',
|
||||||
|
height: '25px',
|
||||||
|
top: '-12px',
|
||||||
|
left: '12px',
|
||||||
|
borderRadius: '25px',
|
||||||
|
background: '#e7f4fd',
|
||||||
|
position: 'absolute',
|
||||||
|
zIndex: '-1'
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
Span({
|
||||||
|
width: '87px',
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: '-2px',
|
||||||
|
background: '#000',
|
||||||
|
zIndex: '-1',
|
||||||
|
boxShadow: '0 0 6px 2px rgba(0,0,0,0.1)',
|
||||||
|
borderRadius: '50%'
|
||||||
})
|
})
|
||||||
],
|
]
|
||||||
})
|
}),
|
||||||
|
text
|
||||||
|
//createElement({
|
||||||
|
// style: {
|
||||||
|
// position: 'absolute',
|
||||||
|
// top: '50%',
|
||||||
|
// left: '50%',
|
||||||
|
// transform: 'translate(-50%, -50%)',
|
||||||
|
// width: '4rem',
|
||||||
|
// height: '4rem',
|
||||||
|
// backgroundColor: '#ff1414',
|
||||||
|
// borderRadius: '50%',
|
||||||
|
// opacity: 0.2,
|
||||||
|
// boxShadow: '-35px 10px 0 -10px, 33px 15px 0 -15px, 0 0 0 6px #fff, -35px 10px 0 -5px #fff, 33px 15px 0 -10px #fff;',
|
||||||
|
// background: 'currentColor',
|
||||||
|
// },
|
||||||
|
// children: [
|
||||||
|
// createElement({
|
||||||
|
// style: {
|
||||||
|
// position: 'absolute',
|
||||||
|
// top: '50%',
|
||||||
|
// left: '50%',
|
||||||
|
// transform: 'translate(-50%, -50%)',
|
||||||
|
// width: '2rem',
|
||||||
|
// height: '2rem',
|
||||||
|
// backgroundColor: '#fff',
|
||||||
|
// borderRadius: '50%',
|
||||||
|
// boxShadow: '0 0 0 6px #fff, -35px 10px 0 -5px #fff, 33px 15px 0 -10px #fff;',
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// ],
|
||||||
|
//})
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
//Input({
|
//Input({
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue