LaniakeaSupercluster
/
webrtc
2
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

换上云朵

This commit is contained in:
觉 2023-10-13 00:50:58 +08:00
parent 50985470e1
commit 2112870a8b
1 changed files with 90 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
public/weigets.js
View File

@ -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)
for (const key in attributes) element.setAttribute(key, attributes[key])
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 (dataset) Object.assign(element.dataset, dataset)
if (children) children.forEach(child => element.appendChild(child))
if (onmouseenter) element.onmouseenter = onmouseenter
if (onmouseleave) element.onmouseleave = onmouseleave
return element
}
@ -41,6 +43,18 @@ export function Avatar(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({
...options,
style: {
@ -72,38 +86,92 @@ export function UploadMusic(options) {
})
input.click()
},
onmouseenter: event => {
text.style.display = 'block'
},
onmouseleave: event => {
text.style.display = 'none'
},
children: [
// 绘制一个云朵上传图标(别放弃...还有我呢!)
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',
width: '82px',
height: '30px',
background: '#e7f4fd',
background: '-webkit-linear-gradient(top,#e7f4fd 5%,#ceedfd 100%)',
borderRadius: '25px',
position: 'relative',
margin: '33px auto 5px'
},
children: [
createElement({
style: {
width: '45px',
height: '45px',
top: '-22px',
right: '12px',
borderRadius: '50px',
borderRadius: '25px',
background: '#e7f4fd',
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;',
zIndex: '-1'
}
}),
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({