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

设置avatar

Browse Source
This commit is contained in:
觉 2023-10-04 20:05:02 +08:00
parent fa23b6cd7a
commit 8e5e63826d
2 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
public/client.js
View File

@ -205,7 +205,8 @@ export default class ClientList {
`
document.head.appendChild(style)
// 也插入自己的信息
this.add({ id: 'self', name: username })
const avatar = localStorage.getItem('avatar')
this.add({ id: 'self', name: username, avatar })
}
exit(item) {
const client = this.clientlist.find(client => client.id === item.id)
@ -234,25 +235,39 @@ export default class ClientList {
Avatar({
src: item.avatar ?? '/favicon.ico',
style: {
width: '100px',
height: '100px',
borderRadius: '50%',
width: '240px',
height: '240px',
borderRadius: '8px',
margin: '0 auto',
display: 'block'
display: 'block',
cursor: 'pointer'
},
onclick: event => {
// 点击上传图片
console.log('点击上传图片')
const input = document.createElement('input')
input.type = 'file'
input.accept = 'image/*'
input.onchange = async event => {
const file = event.target.files[0]
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = async event => {
const base64 = event.target.result
localStorage.setItem('avatar', base64)
window.location.reload() // 简单刷新页面
}
}
input.click()
}
}),
Input({
value: item.name ?? item.id,
type: 'text',
placeholder: '请设置你的名字',
onchange: event => {
console.log(event.target.value)
}
}),
Button({
textContent: '保存',
onclick: event => {
event.stopPropagation()
document.body.removeChild(event.target.parentNode.parentNode)
localStorage.setItem('username', event.target.value)
window.location.reload() // 简单刷新页面
}
})
]

4
public/weigets.js
View File

@ -1,12 +1,14 @@
export function createElement({ innerText, textContent, onclick, children = [], dataset, classList = [], ...attributes }, tagName = 'div') {
export function createElement({ innerText, textContent, onclick, onchange, 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)
if (classList.length) element.classList.add(...classList)
if (innerText) element.innerText = innerText
if (textContent) element.textContent = textContent
if (onclick) element.onclick = onclick
if (onchange) element.onchange = onchange
if (dataset) Object.keys(dataset).forEach(key => element.dataset[key] = dataset[key])
if (children) children.forEach(child => element.appendChild(child))
return element