聊天窗口
This commit is contained in:
parent
f9d1d4b588
commit
1211efae37
21
src/chat.js
21
src/chat.js
@ -1,4 +1,4 @@
|
|||||||
import { Span, Button, List, ListItem } from './weigets.js'
|
import { Span, Button, List, ListItem, Input } from './weigets.js'
|
||||||
|
|
||||||
// 先不划分频道, 只有一个公共聊天室
|
// 先不划分频道, 只有一个公共聊天室
|
||||||
export default class Chat {
|
export default class Chat {
|
||||||
@ -9,13 +9,17 @@ export default class Chat {
|
|||||||
document.body.appendChild(this.ul) // 元素加入页面
|
document.body.appendChild(this.ul) // 元素加入页面
|
||||||
|
|
||||||
// 添加输入框
|
// 添加输入框
|
||||||
const input = document.createElement('input')
|
const input = Input({
|
||||||
input.type = 'text'
|
type: 'text',
|
||||||
input.placeholder = '输入聊天内容'
|
placeholder: '输入聊天内容',
|
||||||
input.style.width = '100%'
|
style: {
|
||||||
input.style.height = '5rem'
|
height: '5rem',
|
||||||
input.style.margin = '1rem 2rem'
|
margin: '1rem 2rem',
|
||||||
input.addEventListener('keydown', event => {
|
padding: '1rem',
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
boxShadow: '0 0 1rem #eee',
|
||||||
|
},
|
||||||
|
onkeydown: event => {
|
||||||
if (event.key === 'Enter') {
|
if (event.key === 'Enter') {
|
||||||
const text = input.value.trim()
|
const text = input.value.trim()
|
||||||
if (text) {
|
if (text) {
|
||||||
@ -23,6 +27,7 @@ export default class Chat {
|
|||||||
input.value = ''
|
input.value = ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
document.body.appendChild(input)
|
document.body.appendChild(input)
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user