聊天窗口

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,18 +9,23 @@ 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 => {
-            if (event.key === 'Enter') {
-                const text = input.value.trim()
-                if (text) {
-                    this.send(text)
-                    input.value = ''
+        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) {
+                        this.send(text)
+                        input.value = ''
+                    }
                 }
             }
         })