TextArea

src/chat.js

@@ -1,7 +1,6 @@
 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 {
     constructor({ name, EventListeners = {}, onsend, onexit }) {
         this.event = { onsend, onexit }
@@ -11,7 +10,7 @@ export default class Chat {
         document.body.appendChild(createElement({
             children: [
                 this.ul,
-                createElement({
+                TextArea({
                     type: 'text',
                     placeholder: '输入聊天内容',
                     style: {
@@ -28,7 +27,7 @@ export default class Chat {
                             event.target.value = ''
                         }
                     }
-                }, 'textarea'),
+                }),
                 Button({
                     textContent: '发送(ctrl+Enter)',
                     onclick: event => {
@@ -48,9 +47,8 @@ export default class Chat {
                 }),
             ]
         }))
-        // 写入 css 样式到 head
-        const style = document.createElement('style')
-        style.innerText = `
+        document.head.appendChild(createElement({
+            innerText: `
             ul.chat-list {
                 max-height: 70vh;
                 overflow-y: auto;
@@ -68,9 +66,8 @@ export default class Chat {
             }
             ul.chat-list > li.disable {
                 color: #888;
-            }
-        `
-        document.head.appendChild(style)
+            }`
+        }, 'style'))
         this.载入消息()
     }
     // 收到应答(对方确认消息已被接收)

src/weigets.js

@@ -35,6 +35,10 @@ 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'