聊天窗口

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 {
@@ -9,13 +9,17 @@ export default class Chat {
         document.body.appendChild(this.ul)   // 元素加入页面
 
         // 添加输入框
-        const input = document.createElement('input')
-        input.type = 'text'
-        input.placeholder = '输入聊天内容'
-        input.style.width = '100%'
-        input.style.height = '5rem'
-        input.style.margin = '1rem 2rem'
-        input.addEventListener('keydown', event => {
+        const input = Input({
+            type: 'text',
+            placeholder: '输入聊天内容',
+            style: {
+                height: '5rem',
+                margin: '1rem 2rem',
+                padding: '1rem',
+                boxSizing: 'border-box',
+                boxShadow: '0 0 1rem #eee',
+            },
+            onkeydown: event => {
                 if (event.key === 'Enter') {
                     const text = input.value.trim()
                     if (text) {
@@ -23,6 +27,7 @@ export default class Chat {
                         input.value = ''
                     }
                 }
+            }
         })
         document.body.appendChild(input)