avatar 降低点错概率

This commit is contained in:
2023-10-07 02:01:22 +08:00
parent 7e50b901c9
commit da79d6d4d7
1 changed files with 53 additions and 63 deletions

View File

@ -225,73 +225,63 @@ export default class ClientList {
add(item) {
this.element.appendChild(ListItem({
id: item.id,
onclick: event => {
},
onclick: event => document.body.appendChild(Dialog({
children: [
Avatar({
src: item.avatar ?? '/favicon.ico',
style: {
width: '240px',
height: '240px',
borderRadius: '8px',
margin: '0 auto',
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({
style: {
width: '100px',
border: '2px dotted #bbb',
borderRadius: '50%',
outline: 'none',
padding: '5px 0',
textAlign: 'center',
position: 'absolute',
bottom: '-2px',
},
value: item.name ?? item.id,
type: 'text',
placeholder: '请设置你的昵称',
onchange: event => {
localStorage.setItem('username', event.target.value)
window.location.reload() // 简单刷新页面
}
})
]
})),
children: [
Avatar({
src: item.avatar ?? '/favicon.ico',
onclick: event => {
event.stopPropagation()
// 点击插入一个弹出层
document.body.appendChild(Dialog({
children: [
Avatar({
src: item.avatar ?? '/favicon.ico',
style: {
width: '240px',
height: '240px',
borderRadius: '8px',
margin: '0 auto',
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({
style: {
width: '100px',
border: '2px dotted #bbb',
borderRadius: '50%',
outline: 'none',
padding: '5px 0',
textAlign: 'center',
position: 'absolute',
bottom: '-2px',
},
value: item.name ?? item.id,
type: 'text',
placeholder: '请设置你的昵称',
onchange: event => {
localStorage.setItem('username', event.target.value)
window.location.reload() // 简单刷新页面
}
})
]
}))
}
src: item.avatar ?? '/favicon.ico'
}),
Span({
textContent: item.name ?? item.id,
onclick: event => {
event.stopPropagation()
}
textContent: item.name ?? item.id
})
]
}))