src/chat.js

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

src/weigets.js

@@ -35,10 +35,6 @@ export function Input(options) {
     return createElement(options, 'input')
 }
 
-export function TextArea(options) {
-    return createElement(options, 'textarea')
-}
-
 export function Avatar(options) {
     const element = createElement(options, 'img')
     element.onerror = () => element.src = '/favicon.ico'