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

换上云朵

Browse Source
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) 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({