fix: 优化input 组件

src/config.js

@@ -273,7 +273,7 @@ module.exports = {
         },
         {
           name: 'Rate',
-          sort: 2,
+          sort: 4,
           cName: '评分',
           type: 'component',
           show: true,

src/config.ts

@@ -1,281 +0,0 @@
-export const versions = [
-  { name: '1.x', link: '/1x/' },
-  { name: '2.x', link: '/' },
-  { name: '3.x', link: '/3x/' }
-];
-
-export const header = [
-  {
-    name: 'guide',
-    cName: '指南',
-    path: '/'
-  },
-  {
-    name: '/',
-    cName: '组件',
-    path: '/'
-  },
-  {
-    name: 'example',
-    cName: '示例',
-    path: '/'
-  },
-  {
-    name: 'resource',
-    cName: '资源',
-    path: '/resource'
-  }
-];
-
-export const docs = {
-  name: '指南',
-  packages: [
-    {
-      name: 'intro',
-      cName: '介绍',
-      show: true
-    },
-    {
-      name: 'start',
-      cName: '快速上手',
-      show: true
-    },
-    {
-      name: 'theme',
-      cName: '主题定制',
-      show: true
-    },
-    {
-      name: 'international',
-      cName: '国际化',
-      show: true
-    },
-    {
-      name: 'https://github.com/jdf2e/nutui/releases',
-      cName: '更新日志',
-      show: true,
-      isLink: true
-    }
-  ]
-};
-
-export const nav = [
-  {
-    name: '布局组件',
-    packages: [
-      {
-        name: 'Button',
-        sort: 1,
-        cName: '按钮组件',
-        type: 'component',
-        show: true,
-        desc: '按钮用于触发一个操作，如提交表单。',
-        author: 'richard1015'
-      },
-      {
-        name: 'collapse',
-        sort: 2,
-        cName: '折叠面板',
-        type: 'component',
-        show: true,
-        desc: '折叠面板',
-        author: 'Ymm0008'
-      },
-      {
-        name: 'collapse',
-        sort: 3,
-        cName: '折叠面板-item',
-        type: 'component',
-        show: false,
-        desc: '折叠面板-item',
-        author: 'Ymm0008'
-      },
-      {
-        name: 'Layout',
-        sort: 4,
-        cName: '布局',
-        type: 'component',
-        show: true,
-        desc: '简便地创建布局',
-        author: 'undo'
-      },
-      {
-        name: 'col',
-        sort: 5,
-        cName: '布局-Col',
-        type: 'component',
-        show: false,
-        desc: '布局组件Col',
-        author: 'undo'
-      },
-      {
-        name: 'row',
-        sort: 6,
-        cName: '布局-Row',
-        type: 'component',
-        show: false,
-        desc: '布局组件Row',
-        author: 'undo'
-      }
-    ]
-  },
-  {
-    name: '操作反馈',
-    packages: [
-      {
-        name: 'BackTop',
-        sort: '1',
-        cName: '回到顶部',
-        type: 'component',
-        show: true,
-        desc: '较长页面快捷回到顶部',
-        author: 'liqiong43'
-      }
-    ]
-  },
-  {
-    name: '基础组件',
-    packages: [
-      {
-        name: 'Temp',
-        sort: 1,
-        cName: '模板组件',
-        type: 'component',
-        show: true,
-        desc: '组件模板示例',
-        author: 'richard1015'
-      },
-      {
-        name: 'Cell',
-        sort: 1,
-        cName: '单元格组件',
-        type: 'component',
-        show: true,
-        desc: '展示列表',
-        author: 'richard1015'
-      },
-      {
-        name: 'Uploader',
-        sort: 2,
-        cName: '上传组件',
-        type: 'component',
-        show: true,
-        desc: '上传文件、图片',
-        author: 'richard1015'
-      },
-      {
-        name: 'Icon',
-        sort: 3,
-        cName: '图标组件',
-        type: 'component',
-        show: true,
-        desc: '图标',
-        author: 'richard1015'
-      },
-      {
-        name: 'Price',
-        sort: 4,
-        cName: '价格组件',
-        type: 'component',
-        show: true,
-        desc: '价格组件',
-        author: 'ailululu'
-      },
-      {
-        name: 'Checkbox',
-        sort: 5,
-        cName: '复选按钮',
-        type: 'component',
-        show: true,
-        desc: '复选按钮',
-        author: 'Ymm0008'
-      },
-      {
-        name: 'Swiper',
-        sort: 6,
-        cName: '轮播',
-        type: 'component',
-        show: true,
-        desc: '轮播',
-        author: 'ailululu'
-      },
-      {
-        name: 'Avatar',
-        sort: 7,
-        cName: '头像',
-        type: 'component',
-        show: true,
-        desc: '头像',
-        author: 'ailululu'
-      },
-      {
-        name: 'Menu',
-        sort: 8,
-        cName: '菜单',
-        type: 'component',
-        show: true,
-        desc: '菜单',
-        author: 'vickyYE'
-      }
-    ]
-  },
-  {
-    name: '导航组件',
-    packages: [
-      {
-        name: 'Navbar',
-        sort: 3,
-        cName: '导航组件',
-        type: 'componment',
-        show: true,
-        desc: '导航组件',
-        author: 'liqiong43'
-      },
-      {
-        name: 'tab',
-        sort: 1,
-        cName: '标签组件',
-        type: 'component',
-        show: true,
-        desc: '标签组件',
-        author: 'zhenyulei'
-      }
-    ]
-  },
-  {
-    name: '数据录入',
-    packages: [
-      {
-        name: 'InputNumber',
-        sort: 1,
-        cName: '数字输入框',
-        type: 'component',
-        show: true,
-        desc: '数字输入框组件',
-        author: 'szg2008'
-      },
-      {
-        name: 'Rate',
-        sort: 2,
-        cName: '评分',
-        type: 'component',
-        show: true,
-        desc: '评分组件',
-        author: 'undo'
-      },
-      {
-        name: 'Switch',
-        type: 'component',
-        cName: '开关组件',
-        desc: '用来打开或关闭选项',
-        sort: 3,
-        show: true,
-        author: 'zongyue3'
-      }
-    ]
-  },
-  {
-    name: '业务组件',
-    packages: []
-  }
-];

src/packages/input/demo.vue

@@ -1,26 +1,27 @@
 <template>
   <div class="demo-nopading">
     <h2>基础用法</h2>
-    <nut-input v-model:value="state.val1" @change="change" label="标题：" />
+    <nut-input v-model:value="state.val1" @change="change" @focus="focus"  @blur="blur" label="标题：" />
 
     <nut-input
       placeholder="请输入文本"
       @change="change"
       v-model:value="state.val0"
-      requireShow="true"
+      :requireShow="true"
       label="标题："
+     @clear="clear"
     />
     <h2>禁用输入框</h2>
     <nut-input
       v-model:value="state.val2"
       @change="change"
-      disabled="true"
+      :disabled="true"
       label="标题："
     />
     <nut-input
       v-model:value="state.val3"
       @change="change"
-      readonly="true"
+      :readonly="true"
       label="标题："
     />
     <h2>限制输入长度</h2>
@@ -54,7 +55,7 @@
     <nut-input
       v-model:value="state.val7"
       @change="change"
-      autosize="true"
+      :autosize="true"
       type="textarea"
       placeholder="文本域"
       label="留言："
@@ -72,7 +73,7 @@
       v-model:value="state.val8"
       @change="change"
       rows="5"
-      limitShow="true"
+      :limitShow="true"
       maxLength="20"
       type="textarea"
       placeholder="设置输入五行"
@@ -104,9 +105,21 @@ export default createDemo({
     const change = (num: string | number) => {
       console.log('change: ', num);
     };
+    const focus=(num:string|number)=>{
+      console.log("focus:",num)
+    }
+    const blur=(num:string|number)=>{
+      console.log("blur:",num)
+    }
+    const clear=(num:string|number)=>{
+      console.log("clear:",num)
+    }
     return {
       state,
-      change
+      change,
+      blur,
+      clear,
+      focus
     };
   }
 });

src/packages/input/doc.md

@@ -1,3 +1,64 @@
+# Input 输入框组件
+
+### 介绍
+
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { input } from '@nutui/nutui';
+
+const app = createApp();
+app.use(input);
+
+```
+## 代码演示
+
+### 基础用法
+
+双向绑定
+
+```html
+<nut-input v-model:value="state.val1" @change="change" label="标题：" />
+
+```
+
+### 禁用和只读
+
+
+```html
+<nut-input v-model:value="state.val2" @change="change"  disabled="true" label="标题："/>
+<nut-input v-model:value="state.val3" @change="change" readonly="true"  label="标题："/>
+```
+
+### 限制输入长度
+
+```html
+ <nut-input v-model:value="state.val4" @change="change" maxLength="7" label="限制7：" />
+```
+### 其他类型
+
+```html
+<nut-input v-model:value="state.val0" @change="change" type="password" label="密码："/>
+<nut-input v-model:value="state.val5" @change="change" type="digit" label="整数：" />
+<nut-input v-model:value="state.val6" @change="change" type="digit" placeholder="支持小数点的输入" label="数字："/>
+```
+### 文本域
+
+```html
+ <nut-input v-model:value="state.val7" @change="change" autosize="true" type="textarea" placeholder="文本域" label="留言："/>
+<nut-input v-model:value="state.val7" @change="change" rows="5" type="textarea" placeholder="设置输入五行"  label="留言："/>
+
+```
+### 文本域字数统计
+
+```html
+ <nut-input v-model:value="state.val8" @change="change" rows="5" limitShow="true" maxLength="20" type="textarea" placeholder="设置输入五行" label="留言："/>
+
+```
+
+
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
 | type         | 类型，可选值为 `text` `textarea` `number`  等 | String |`text`         |
@@ -5,22 +66,19 @@
 | placeholder         | 为空时占位符 | String |       -       |
 | placeholder-style | placeholder 样式     | String | - |
 | label          | 	左侧文案                       | string | -             |
-| has-border          | 	是否有边框                       | booleab | true            |
 | disabled          | 	是否禁用                       | boolean | `false`              |
 | readonly          | 是否只读                        | boolean | `false`               |
 | clear-btn       | 是否带清除按钮（icon）                        | boolean | `true`               |
 | required          | 是否带必填的*号，且blur事件做非空校验                       | boolean | `false`               |
 | maxlength          | 限制最长输入字符                   | string/number | -               |
+| rows          | textarea时高度                   | string/number | 2             |
 | limit-show          | textarea时是否展示输入字符。须设置maxlength                        | boolean | `false`               |
 
-
-事件
-| input          | 输入内容时触发                        | function | -               |
 | change          | 输入内容时触发                        | function | -               |
 | focus          | 聚焦时触发                        | function | -               |
 | blur          | 失焦时触发                        | function | -               |
 | clear          | 点击清空时触发                        | function | -               |
-| error          | 校验错误时触发                        | function | -               |
+
 
 
 

src/packages/input/index.scss

@@ -1,4 +1,5 @@
 .nut-input {
+    position: relative;
   width: 100%;
   padding: 10px 0px 10px 25px;
   display: flex;
@@ -18,7 +19,8 @@
   .nut-textinput-clear {
     width: 16px;
     height: 16px;
-    margin-right: 15px;
+    position: absolute;
+    right: 15px;
   }
   .nut-text {
     flex: 1;

src/packages/input/index.vue

@@ -34,23 +34,23 @@
       :placeholder="placeholder"
       :disabled="disabled"
       :readonly="readonly"
-      v-model="state.curretvalue"
+      :value="state.curretvalue"
       @input="valueChange"
-      @focus="focus"
-      @blur="blur"
+      @focus="valueFocus"
+      @blur="valueBlur"
     />
-    <!-- <view
+    <view
       @click="handleClear"
       class="nut-textinput-clear"
       v-if="!disableClear && !readonly"
-      v-show="type !== 'textarea' && active"
+      v-show="type !== 'textarea'  && active"
     >
       <svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
         <path
           d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm2.8 9.7c.3.3.3.8 0 1.1s-.8.3-1.1 0L8 9.1l-1.7 1.7c-.3.3-.8.3-1.1 0-.3-.3-.3-.8 0-1.1L6.9 8 5.2 6.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0L8 6.9l1.7-1.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1L9.1 8l1.7 1.7z"
         />
       </svg>
-    </view> -->
+    </view>
   </view>
 </template>
 <script lang="ts">
@@ -102,11 +102,11 @@ export default create({
     }
   },
   components: {},
-  emits: ['change', 'update:value', 'blur', 'focus'],
+  emits: ['change', 'update:value', 'blur', 'focus','clear'],
 
   setup(props, { emit }) {
     interface Events {
-      eventName: 'change';
+      eventName: 'change' | 'focus'|'blur';
       params: (string | number | Event)[];
     }
 
@@ -159,9 +159,9 @@ export default create({
       if (props.type == 'number') {
         val = formatNumber(val, false);
       }
-      state.textNum = val.length;
-      input.value = val;
-      state.curretvalue = val;
+       state.textNum = val.length;
+      // input.value = val;
+       //state.curretvalue = val;
       emitChange([
         {
           eventName: 'update:value',
@@ -173,7 +173,7 @@ export default create({
         }
       ]);
     };
-    const focus = (e: Event) => {
+    const valueFocus = (e: Event) => {
       active.value = true;
       const input = e.target as HTMLInputElement;
       let val = input.value;
@@ -189,21 +189,38 @@ export default create({
         }
       ]);
     };
-    const blur = () => {
-      //active.value = false;
-      // const input = e.target as HTMLInputElement;
-      // let val = input.value;
-      // emitChange([
-      //   {
-      //     eventName: 'update:modelValue',
-      //     params: [val]
-      //   },
-      //   {
-      //     eventName: 'focus',
-      //     params: [val]
-      //   }
-      // ]);
+    const valueBlur = (e: Event) => {
+      
+      setTimeout(()=>{
+active.value = false;
+      },400)
+      const input = e.target as HTMLInputElement;
+       let val = input.value;
+      val = String(val);
+      emitChange([
+        {
+          eventName: 'update:value',
+          params: [val]
+        },
+        {
+          eventName: 'blur',
+          params: [val]
+        }
+      ]);
     };
+    const handleClear=()=>{
+      const val="";
+      emitChange([
+        {
+          eventName: 'update:value',
+          params: [val]
+        },
+        {
+          eventName: 'clear',
+          params: [val]
+        }
+      ]);
+    }
     return {
       value,
       requireShow,
@@ -217,8 +234,9 @@ export default create({
       active,
       maxLength,
       valueChange,
-      focus,
-      blur,
+      valueFocus,
+      valueBlur,
+      handleClear,
       emitChange
     };
   }