Compare commits
2 Commits
df3500f6c5
...
ea397c735b
Author | SHA1 | Date | |
---|---|---|---|
ea397c735b | |||
f5ac981a15 |
17
src/chat.js
17
src/chat.js
@ -1,7 +1,6 @@
|
|||||||
import { get, set, del, update, createStore, values } from 'idb-keyval'
|
import { get, set, del, update, createStore, values } from 'idb-keyval'
|
||||||
import { Span, Button, List, ListItem, Input, createElement } from './weigets.js'
|
import { Span, Button, List, ListItem, TextArea, createElement } from './weigets.js'
|
||||||
|
|
||||||
// 先不划分频道, 只有一个公共聊天室
|
|
||||||
export default class Chat {
|
export default class Chat {
|
||||||
constructor({ name, EventListeners = {}, onsend, onexit }) {
|
constructor({ name, EventListeners = {}, onsend, onexit }) {
|
||||||
this.event = { onsend, onexit }
|
this.event = { onsend, onexit }
|
||||||
@ -11,7 +10,7 @@ export default class Chat {
|
|||||||
document.body.appendChild(createElement({
|
document.body.appendChild(createElement({
|
||||||
children: [
|
children: [
|
||||||
this.ul,
|
this.ul,
|
||||||
createElement({
|
TextArea({
|
||||||
type: 'text',
|
type: 'text',
|
||||||
placeholder: '输入聊天内容',
|
placeholder: '输入聊天内容',
|
||||||
style: {
|
style: {
|
||||||
@ -28,7 +27,7 @@ export default class Chat {
|
|||||||
event.target.value = ''
|
event.target.value = ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, 'textarea'),
|
}),
|
||||||
Button({
|
Button({
|
||||||
textContent: '发送(ctrl+Enter)',
|
textContent: '发送(ctrl+Enter)',
|
||||||
onclick: event => {
|
onclick: event => {
|
||||||
@ -48,9 +47,8 @@ export default class Chat {
|
|||||||
}),
|
}),
|
||||||
]
|
]
|
||||||
}))
|
}))
|
||||||
// 写入 css 样式到 head
|
document.head.appendChild(createElement({
|
||||||
const style = document.createElement('style')
|
innerText: `
|
||||||
style.innerText = `
|
|
||||||
ul.chat-list {
|
ul.chat-list {
|
||||||
max-height: 70vh;
|
max-height: 70vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
@ -68,9 +66,8 @@ export default class Chat {
|
|||||||
}
|
}
|
||||||
ul.chat-list > li.disable {
|
ul.chat-list > li.disable {
|
||||||
color: #888;
|
color: #888;
|
||||||
}
|
}`
|
||||||
`
|
}, 'style'))
|
||||||
document.head.appendChild(style)
|
|
||||||
this.载入消息()
|
this.载入消息()
|
||||||
}
|
}
|
||||||
// 收到应答(对方确认消息已被接收)
|
// 收到应答(对方确认消息已被接收)
|
||||||
|
@ -35,6 +35,10 @@ export function Input(options) {
|
|||||||
return createElement(options, 'input')
|
return createElement(options, 'input')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function TextArea(options) {
|
||||||
|
return createElement(options, 'textarea')
|
||||||
|
}
|
||||||
|
|
||||||
export function Avatar(options) {
|
export function Avatar(options) {
|
||||||
const element = createElement(options, 'img')
|
const element = createElement(options, 'img')
|
||||||
element.onerror = () => element.src = '/favicon.ico'
|
element.onerror = () => element.src = '/favicon.ico'
|
||||||
|
Loading…
Reference in New Issue
Block a user