对话框

src/chat.js

@@ -95,9 +95,27 @@ export default class Chat {
     }
     添加元素(data) {
         this.ul.appendChild(ListItem({
+            style: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                margin: '1rem',
+                padding: '.5rem 1rem',
+                boxSizing: 'border-box',
+                boxShadow: '0 0 1rem #eee',
+                maxWidth: '24rem',
+                borderRadius: '1rem',
+            },
             children: [
                 Span({ textContent: `${data.name} ${data.time} ${data.text}` }),
                 Button({
+                    style: {
+                        boxSizing: 'border-box',
+                        boxShadow: '0 0 1rem #eee',
+                        borderRadius: '1rem',
+                        fontSize: '12px',
+                        color: '#555'
+                    },
                     textContent: '删除',
                     onclick: event => {
                         event.target.parentNode.remove()

src/weigets.js

@@ -28,7 +28,13 @@ export function Span(options) {
 }
 
 export function Button(options) {
-    return createElement(options, 'button')
+    return createElement({
+        ...options,
+        style: {
+            cursor: 'pointer',
+            ...options.style
+        }
+    }, 'button')
 }
 
 export function Input(options) {