feat: add input event example

chaxus · Sep 7, 2023 · 56f5e7a · 56f5e7a
1 parent d49eb6c
commit 56f5e7a
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 11 deletions.
diff --git a/packages/ranui/components/input/index.ts b/packages/ranui/components/input/index.ts
@@ -19,6 +19,7 @@ function Custom() {
           'type',
           'icon',
           'status',
+          'onChange'
         ]
       }
       _container: HTMLDivElement
@@ -253,9 +254,16 @@ function Custom() {
             },
           }),
         )
+        this.dispatchEvent(
+          new CustomEvent('Input', {
+            detail: {
+              value: this.value,
+            },
+          }),
+        )
       }
       /**
-       * @description: 增加change方法
+       * @description: 增加change方法，同时兼容大小写的情况
        */
       change = () => {
         this.dispatchEvent(
@@ -265,6 +273,13 @@ function Custom() {
             },
           }),
         )
+        this.dispatchEvent(
+          new CustomEvent('Change', {
+            detail: {
+              value: this.value,
+            },
+          }),
+        )
       }
       /**
        * @description: 增加focus方法

diff --git a/packages/ranui/index.html b/packages/ranui/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <link rel="icon" href="data:;">
+    <link rel="icon" href="data:;" />
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -47,15 +47,21 @@ <h2>Input</h2>
       "
     >
       <r-input label="user"></r-input>
-      <r-input icon="account" status="error"></r-input>
+      <r-input id="input2" icon="account" status="error" onChange="changeInput(this.value)"></r-input>
+      <input oninput="changeInput"></input>
       <r-input icon="home" status="warning" disabled></r-input>
     </div>
     <h2>Preview</h2>
-    <r-button type="primary" onclick="uploadFile()"
-      >choose file to preview</r-button
+    <r-button type="primary" onclick="uploadFile()">choose file to preview</r-button
     >
     <r-preview id="preview"></r-preview>
     <script>
+      const inputDom = document.getElementById('input2')
+      function changeInput(e){
+        console.log('e--->',e)
+      }
+      // inputDom.addEventListener("change", changeInput);
+
       const uploadFile = () => {
         const preview = document.getElementById('preview')
         const uploadFile = document.createElement('input')
@@ -74,9 +80,13 @@ <h2>Preview</h2>
     </script>
     <h2>message</h2>
     <r-button onclick="message.info('这是一条提示 info')">信息提示</r-button>
-    <r-button onclick="message.warning('这是一条提示 warning')">警告提示</r-button>
+    <r-button onclick="message.warning('这是一条提示 warning')"
+      >警告提示</r-button
+    >
     <r-button onclick="message.error('这是一条提示 error')">错误提示</r-button>
-    <r-button onclick="message.success('这是一条提示 success')">成功提示</r-button>
+    <r-button onclick="message.success('这是一条提示 success')"
+      >成功提示</r-button
+    >
     <r-button onclick="message.toast('这是一条提示 toast')">成功提示</r-button>
   </body>
 </html>
diff --git a/packages/ranuts/src/server/server.ts b/packages/ranuts/src/server/server.ts
@@ -37,7 +37,7 @@ function ipv4(): string | undefined {
 }
 
 class Server {
-  stack: Array<MiddlewareFunction>
+  middleware: Array<MiddlewareFunction>
   ctx: Context
   constructor() {
     const req = new http.IncomingMessage(new Socket())
@@ -47,7 +47,7 @@ class Server {
       req,
       res,
     }
-    this.stack = []
+    this.middleware = []
     /**
      * @description: 添加中间件
      */
@@ -56,10 +56,10 @@ class Server {
     if (!handle) {
       throw new Error('the use function has an incorrect argument')
     }
-    this.stack.push(handle)
+    this.middleware.push(handle)
   }
   listen(...args: any): http.Server {
-    const fn = compose(this.stack)
+    const fn = compose(this.middleware)
     const server = http.createServer((req, res) => {
       this.ctx.req = req
       this.ctx.res = res