fix: input融合form,icon使用修改 (#1970)

* fix: backtop  add ts interface

* fix: ts类型修改

* feat: 添加*.d.ts文件

* fix: ts类型修改

* fix: toast类型修改

* fix: input组件修改，结合form

* fix: input组件showlimit 调整，样式修改，icon修改

* fix: input 修改

* fix: input icon 修改

Co-authored-by: lkjh3214 <13121007159@163.com>
Co-authored-by: love_forever <1039168735@qq.com>
Co-authored-by: richard1015 <51844712@qq.com>

src/packages/__VUE/form/demo.vue

@@ -26,7 +26,7 @@
         required
         :rules="[{ required: true, message: translate('nameTip') }]"
       >
-        <input
+        <nut-input
           class="nut-input-text"
           v-model="dynamicForm.state.name"
           :placeholder="translate('nameTip')"
@@ -75,7 +75,7 @@
         required
         :rules="[{ required: true, message: translate('nameTip') }]"
       >
-        <input
+        <nut-input
           class="nut-input-text"
           @blur="customBlurValidate('name')"
           v-model="formData.name"

src/packages/__VUE/input/__tests__/__snapshots__/input.spec.ts.snap

@@ -1,29 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should colon 1`] = `
-"<view class=\\"nut-input__label\\" style=\\"width: 80px; text-align: left;\\">
-  <view class=\\"nut-input__label-string\\">test :</view>
-</view>"
-`;
-
 exports[`should render word limit correctly 1`] = `"<view class=\\"nut-input-word-limit\\"><span class=\\"nut-input-word-num\\">3</span>/9999</view>"`;
 
 exports[`should render word limit correctly when modelValue is null 1`] = `
 "<view class=\\"nut-input nut-input--border\\" maxlength=\\"3\\">
-  <!--v-if-->
-  <!--v-if-->
   <view class=\\"nut-input-value\\">
     <view class=\\"nut-input-inner\\">
-      <view class=\\"nut-input-box\\"><input style=\\"text-align: left;\\" type=\\"text\\" class=\\"input-text\\" maxlength=\\"9999\\" placeholder=\\"\\" formattrigger=\\"onChange\\" enterkeyhint=\\"done\\"></view>
-      <view class=\\"nut-input-clear-box\\">
-        <!--v-if-->
+      <view class=\\"nut-input-box\\"><input style=\\"text-align: left;\\" type=\\"text\\" class=\\"input-text\\" maxlength=\\"9999\\" placeholder=\\"\\" formattrigger=\\"onChange\\" enterkeyhint=\\"done\\">
+        <view class=\\"nut-input-word-limit\\"><span class=\\"nut-input-word-num\\">0</span>/9999</view>
       </view>
       <!--v-if-->
-      <!--v-if-->
-      <!--v-if-->
     </view>
-    <view class=\\"nut-input-word-limit\\"><span class=\\"nut-input-word-num\\">0</span>/9999</view>
-    <!--v-if-->
   </view>
 </view>"
 `;

src/packages/__VUE/input/__tests__/input.spec.ts

@@ -13,7 +13,7 @@ afterAll(() => {
 });
 
 test('base', () => {
-  const wrapper = mount(Input, { props: { modelValue: 3 } });
+  const wrapper = mount(Input, { props: { modelValue: '3' } });
   const input = wrapper.find('input');
   expect(input.exists()).toBe(true);
   expect(input.element.value).toBe('3');
@@ -102,45 +102,6 @@ test('should format input value when type is digit', () => {
   // expect((wrapper.emitted('change') as any)[1][0]).toEqual('11');
 });
 
-test('should no label', () => {
-  const wrapper = mount(Input, {
-    props: {}
-  });
-  const label = wrapper.find('.label-string');
-  expect(label.exists()).toBe(false);
-});
-
-test('should label', () => {
-  const wrapper = mount(Input, {
-    props: {
-      label: '文本'
-    }
-  });
-  const label = wrapper.find('.label-string');
-  expect(label.text()).toBe('文本');
-});
-
-test('should label-class', () => {
-  const wrapper = mount(Input, {
-    props: {
-      label: '文本',
-      labelClass: 'test-class'
-    }
-  });
-  const label = wrapper.find('.nut-input__label');
-  expect(label.classes()).toContain('test-class');
-});
-
-test('should colon', () => {
-  const wrapper = mount(Input, {
-    props: {
-      label: 'test',
-      colon: true
-    }
-  });
-  expect(wrapper.find('.nut-input__label').html()).toMatchSnapshot();
-});
-
 test('should require', () => {
   const wrapper = mount(Input, {
     props: {
@@ -148,7 +109,7 @@ test('should require', () => {
     }
   });
   const input = wrapper.find('.nut-input');
-  expect(input.classes()).toContain('nut-input-required');
+  expect(input.classes()).toContain('nut-input--required');
 });
 
 test('should disabled', () => {
@@ -193,17 +154,6 @@ test('should render word limit correctly when modelValue is null', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('should labelAlign', () => {
-  const wrapper = mount(Input, {
-    props: {
-      label: '文本',
-      labelAlign: 'right'
-    }
-  });
-  const input: any = wrapper.find('.nut-input__label');
-  expect(input.element.style.textAlign).toEqual('right');
-});
-
 test('should inputAlign', () => {
   const wrapper = mount(Input, {
     props: {

src/packages/__VUE/input/demo.vue

@@ -1,135 +1,65 @@
 <template>
   <div class="demo full">
     <h2>{{ translate('basic') }}</h2>
-    <nut-input v-model="state.val1" :label="translate('text')" :placeholder="translate('textPlaceholder')" />
+    <nut-input v-model="state.val1" :placeholder="translate('textPlaceholder')" :border="false" />
 
     <h2>{{ translate('title1') }}</h2>
-    <nut-input v-model="state.text" :label="translate('text')" :placeholder="translate('textPlaceholder')" />
-    <nut-input
-      v-model="state.password"
-      :label="translate('password')"
-      :placeholder="translate('passwordPlaceholder')"
-      type="password"
-    />
-    <nut-input
-      :label="translate('number')"
-      :placeholder="translate('numberPlaceholder')"
-      v-model="state.number"
-      type="number"
-    />
-    <nut-input
-      :label="translate('digit')"
-      :placeholder="translate('digitPlaceholder')"
-      v-model="state.digit"
-      type="digit"
-    />
-    <nut-input :label="translate('tel')" :placeholder="translate('telPlaceholder')" v-model="state.tel" type="tel" />
+    <nut-input v-model="state.text" :placeholder="translate('textPlaceholder')" />
+    <nut-input v-model="state.password" :placeholder="translate('passwordPlaceholder')" type="password" />
+    <nut-input :placeholder="translate('numberPlaceholder')" v-model="state.number" type="number" />
+    <nut-input :placeholder="translate('digitPlaceholder')" v-model="state.digit" type="digit" />
     <h2>{{ translate('title2') }}</h2>
-    <nut-input :label="translate('text')" :placeholder="translate('readonly')" v-model="state.readonly" readonly />
-    <nut-input :label="translate('text')" :placeholder="translate('disabled')" v-model="state.disabled" disabled />
-
+    <nut-input :placeholder="translate('readonly')" v-model="state.readonly" readonly />
+    <nut-input :placeholder="translate('disabled')" v-model="state.disabled" disabled />
     <h2>{{ translate('title3') }}</h2>
+    <nut-input v-model="state.clear" :placeholder="translate('clear')" clearable clearSize="14" />
     <nut-input
-      v-model="state.showIcon"
-      :label="translate('text')"
-      :placeholder="translate('icon')"
-      left-icon="dongdong"
-      right-icon="ask2"
-    />
-    <nut-input
-      v-model="state.clear"
-      :label="translate('text')"
-      :placeholder="translate('clear')"
+      v-model="state.clear2"
+      :placeholder="translate('clear2')"
       clearable
       clearSize="14"
-    />
-
-    <h2>{{ translate('title4') }}</h2>
-    <nut-input v-model="state.required" :label="translate('text')" :placeholder="translate('required')" required />
-    <nut-input v-model="state.error1" :label="translate('text')" :placeholder="translate('error')" error />
-    <nut-input
-      v-model="state.error2"
-      :label="translate('text')"
-      :placeholder="translate('errorBottom')"
-      :error-message="translate('errorBottom')"
-    />
-
-    <h2>{{ translate('title5') }}</h2>
-    <nut-input
-      v-model="state.buttonVal"
-      :label="translate('code')"
-      :placeholder="translate('codePlaceholder')"
-      clearable
-      center
+      show-word-limit
+      max-length="50"
     >
-      <template #button>
-        <nut-button size="small" type="primary">
-          {{ translate('sendCode') }}
-        </nut-button>
+      <template #clear>
+        <Close width="12" height="12" @click="clearValue"></Close>
       </template>
     </nut-input>
-
+    <h2>{{ translate('title4') }}</h2>
+    <nut-form :model-value="state">
+      <nut-form-item :label="translate('text')" label-align="center">
+        <nut-input v-model="state.val2" :placeholder="translate('textPlaceholder')" :border="false" />
+      </nut-form-item>
+    </nut-form>
     <h2>{{ translate('title6') }}</h2>
-    <nut-input
-      v-model="state.format1"
-      :label="translate('text')"
-      :placeholder="translate('placeholder1')"
-      :formatter="formatter"
-    />
+    <nut-input v-model="state.format1" :placeholder="translate('placeholder1')" :formatter="formatter" />
     <nut-input
       v-model="state.format2"
-      :label="translate('text')"
       :placeholder="translate('placeholder2')"
       :formatter="formatter"
       format-trigger="onBlur"
     />
-
     <h2>{{ translate('title7') }}</h2>
     <nut-input
       v-model="state.textarea"
-      :label="translate('text')"
       :placeholder="translate('message')"
-      type="textarea"
+      type="text"
       show-word-limit
-      rows="2"
       max-length="50"
     />
 
     <h2>{{ translate('title8') }}</h2>
-    <nut-input
-      v-model="state.align1"
-      :label="translate('text')"
-      :placeholder="translate('placeholder4')"
-      label-align="right"
-    />
-    <nut-input
-      v-model="state.align2"
-      :label="translate('text')"
-      :placeholder="translate('placeholder5')"
-      input-align="right"
-    />
+    <nut-input v-model="state.align1" :placeholder="translate('placeholder4')" label-align="right" />
+    <nut-input v-model="state.align2" :placeholder="translate('placeholder5')" input-align="right" />
 
     <h2>{{ translate('title9') }}</h2>
-    <nut-input
-      v-model="state.noBorder1"
-      :border="false"
-      :label="translate('text')"
-      :placeholder="translate('noBorder')"
-    />
-    <nut-input
-      v-model="state.noBorder2"
-      :border="false"
-      :label="translate('text')"
-      :placeholder="translate('noBorder')"
-    />
+    <nut-input v-model="state.noBorder1" :border="false" :placeholder="translate('noBorder')" />
+    <nut-input v-model="state.noBorder2" :border="false" :placeholder="translate('noBorder')" />
 
     <h2>{{ translate('title10') }}</h2>
     <nut-input
       v-model="state.event"
-      :label="translate('text')"
       :placeholder="translate('event')"
-      left-icon="dongdong"
-      right-icon="ask2"
       clearable
       @update:model-value="change"
       @focus="focus"
@@ -137,14 +67,14 @@
       @clear="clear"
       @click="click"
       @click-input="clickInput"
-      @click-left-icon="clickLeftIcon"
-      @click-right-icon="clickRightIcon"
     />
   </div>
 </template>
 
 <script lang="ts">
 import { reactive } from 'vue';
+import { Close } from '@nutui/icons-vue';
+
 import { createComponent } from '@/packages/utils/create';
 const { createDemo, translate } = createComponent('input');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -154,8 +84,8 @@ const initTranslate = () =>
       basic: '基本用法',
       title1: '自定义类型',
       title2: '禁用和只读',
-      title3: '显示图标',
-      title4: '错误提示',
+      title3: '显示清除图标',
+      title4: '配合表单使用',
       title5: '插入按钮',
       title6: '格式化输入内容',
       title7: '显示字数统计',
@@ -164,21 +94,17 @@ const initTranslate = () =>
       title10: '事件演示',
       text: '文本',
       textPlaceholder: '请输入文本',
-      password: '密码',
       passwordPlaceholder: '请输入密码',
-      number: '数字',
       numberPlaceholder: '请输入数字',
-      digit: '整数',
       digitPlaceholder: '请输入整数',
-      tel: '手机号',
       telPlaceholder: '请输入手机号',
       readonly: '输入框只读',
       disabled: '输入框已禁用',
       icon: '显示图标',
       clear: '显示清除图标',
+      clear2: '自定义清除图标',
       required: '必填项',
       error: '输入内容标红',
-      errorBottom: '底部错误提示文案',
       code: '短信验证码',
       codePlaceholder: '请输入短信验证码',
       sendCode: '发送验证码',
@@ -195,8 +121,8 @@ const initTranslate = () =>
       basic: 'Basic Usage',
       title1: 'Custom Type',
       title2: 'Readonly And Disabled',
-      title3: 'Show Icon',
-      title4: 'Error Info',
+      title3: 'Show Clear Icon',
+      title4: 'Use Form',
       title5: 'Insert Button',
       title6: 'Format Value',
       title7: 'Show Word Limit',
@@ -205,21 +131,17 @@ const initTranslate = () =>
       title10: 'Event Demonstration',
       text: 'Text',
       textPlaceholder: 'Text',
-      password: 'Password',
       passwordPlaceholder: 'Password',
-      number: 'Number',
       numberPlaceholder: 'Number',
-      digit: 'Digit',
       digitPlaceholder: 'Digit',
-      tel: 'Tel',
       telPlaceholder: 'Tel',
       readonly: 'Readonly',
       disabled: 'Disabled',
       icon: 'Show Icon',
       clear: 'Show Clear Icon',
+      clear2: 'Custom Clear Icon',
       required: 'Required',
       error: 'Error',
-      errorBottom: 'Error Message',
       code: 'Code',
       codePlaceholder: 'Please enter code',
       sendCode: 'Send',
@@ -234,10 +156,14 @@ const initTranslate = () =>
     }
   });
 export default createDemo({
+  components: {
+    Close
+  },
   setup() {
     initTranslate();
     const state = reactive({
       val1: '',
+      val2: '',
       text: '',
       password: '',
       number: '',
@@ -257,6 +183,8 @@ export default createDemo({
       align2: '',
       noBorder1: '',
       noBorder2: '',
+      clear: '',
+      clear2: '',
       event: ''
     });
     setTimeout(function () {
@@ -280,14 +208,10 @@ export default createDemo({
     const clickInput = (event: Event) => {
       console.log('clickInput:', event);
     };
-    const clickLeftIcon = (event: Event) => {
-      console.log('clickLeftIcon:', event);
-    };
-    const clickRightIcon = (event: Event) => {
-      console.log('clickRightIcon:', event);
+    const clearValue = () => {
+      state.clear2 = '';
     };
     const formatter = (value: string) => value.replace(/\d/g, '');
-
     return {
       state,
       change,
@@ -296,10 +220,9 @@ export default createDemo({
       focus,
       click,
       clickInput,
-      clickLeftIcon,
-      clickRightIcon,
       formatter,
-      translate
+      translate,
+      clearValue
     };
   }
 });

src/packages/__VUE/input/doc.en-US.md

@@ -8,11 +8,10 @@ The user can enter content in the text box.
 
 ``` javascript
 import { createApp } from 'vue';
-import { Input,Icon } from '@nutui/nutui';
+import { Input } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Input);
-app.use(Icon);
 
 ```
 
@@ -26,7 +25,6 @@ The value of field is bound with `v-model`.
 <template>
   <nut-input 
     v-model="state.text" 
-    label="Text" 
     placeholder="Text" 
   />
 </template>
@@ -56,34 +54,24 @@ Use `type` prop to custom different type fields.
 ```html
 <template>
   <nut-input 
-    label="Text" 
     placeholder="Text" 
     v-model="state.text" 
   />
   <nut-input 
-    label="Password" 
     placeholder="Password" 
     v-model="state.password" 
     type="password" 
   />
   <nut-input 
-    label="Number" 
     placeholder="Number" 
     v-model="state.number" 
     type="number" 
   />
   <nut-input 
-    label="Digit" 
     placeholder="Digit" 
     v-model="state.digit" 
     type="digit" 
   />
-  <nut-input 
-    label="Tel" 
-    placeholder="Tel" 
-    v-model="state.tel" 
-    type="tel" 
-  />
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
@@ -94,7 +82,6 @@ Use `type` prop to custom different type fields.
         password: '',
         number: '',
         digit: '',
-        tel: ''
       });
       return {
         state
@@ -115,13 +102,11 @@ Use `readonly` to set the input box to read-only status, and use `disabled` to s
 ```html
 <template>
   <nut-input 
-    label="Text" 
     placeholder="Readonly" 
     v-model="state.readonly" 
     readonly 
   />
   <nut-input 
-    label="Text" 
     placeholder="Disabled" 
     v-model="state.disabled" 
     disabled 
@@ -145,24 +130,16 @@ Use `readonly` to set the input box to read-only status, and use `disabled` to s
 
 :::
 
-### Show Icon
+### Show Clear Icon
 
-The user can enter content in the text box. Configure the icons on both sides of the input box through `left-icon` and `right-icon`, and display the clear icon during the input process by setting `clearable`. Need to reference the `Icon` component
+Display the clear icon during the input process by setting `clearable`.
 
 :::demo
 
 ```html
 <template>
   <nut-input 
-    v-model="state.showIcon" 
-    label="Text" 
-    placeholder="Show Icon" 
-    left-icon="dongdong" 
-    right-icon="ask2" 
-  />
-  <nut-input 
     v-model="state.clear" 
-    label="Text" 
     placeholder="Show Clear Icon" 
     clearable
     clearSize="14" 
@@ -173,8 +150,6 @@ The user can enter content in the text box. Configure the icons on both sides of
   export default {
     setup() {
       const state = reactive({
-        showIcon: '',
-        required: '',
         clear:''
       });
       return {
@@ -186,41 +161,26 @@ The user can enter content in the text box. Configure the icons on both sides of
 ```
 
 :::
-### Error Info
+### Use With Form
 
-Use `error` or `error-message` to show error info.
+Use in combination with `nut-form` and `nut-form-item`
 
 :::demo
 
 ```html
 <template>
-  <nut-input 
-    v-model="state.required" 
-    label="Text" 
-    placeholder="Required" 
-    required 
-  />
-  <nut-input 
-    v-model="state.error1" 
-    label="Text" 
-    placeholder="Error" 
-    error 
-  />
-  <nut-input 
-    v-model="state.error2" 
-    label="Text" 
-    placeholder="Error Message" 
-    error-message="Error Message" 
-  />
+  <nut-form :model-value="state">
+    <nut-form-item label="Text" label-align="center">
+      <nut-input v-model="state.val1" placeholder="Text" :border="false" />
+    </nut-form-item>
+  </nut-form>
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
   export default {
     setup() {
       const state = reactive({
-        required: '',
-        error1: '',
-        error2: '',
+        val1: '',
       });
       return {
         state
@@ -232,42 +192,6 @@ Use `error` or `error-message` to show error info.
 
 :::
 
-### Insert Button
-
-Use `button` slot to insert button.
-
-:::demo
-
-```html
-<template>
-  <nut-input 
-    v-model="state.buttonVal" 
-    label="Code"
-    placeholder="Please enter code"
-    clearable 
-    center 
-  >
-    <template #button>
-      <nut-button size="small" type="primary">Send</nut-button>
-    </template>
-  </nut-input>
-</template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        buttonVal: ''
-      });
-      return {
-        state
-      };
-    }
-  }
-</script>
-```
-
-:::
 
 ### Format Value
 
@@ -279,14 +203,12 @@ Use `formatter` prop to format the input value.
 <template>
   <nut-input 
     v-model="state.format1" 
-    label="Text" 
     placeholder="Format On Change" 
     :formatter="formatter" 
     format-trigger="onChange"
   />
   <nut-input
     v-model="state.format2"
-    label="Text"
     placeholder="Format On Blur"
     :formatter="formatter"
     format-trigger="onBlur"
@@ -321,9 +243,8 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
 ```html
 <template>
   <nut-input
-    v-model="state.textarea"
-    label="Text"
-    type="textarea"
+    v-model="state.text"
+    type="text"
     show-word-limit
     rows="2"
     max-length="50"
@@ -335,7 +256,7 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
   export default {
     setup() {
       const state = reactive({
-        textarea: ''
+        text: ''
       });
       return {
         state
@@ -347,44 +268,6 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
 
 :::
 
-### Input Align
-
-Use `label-align` prop to align the label, `input-align` prop to align the input value
-
-:::demo
-
-```html
-<template>
-  <nut-input 
-    v-model="state.align1" 
-    label="Text" 
-    label-align="right" 
-    placeholder="Label Align" 
-  />
-  <nut-input 
-    v-model="state.align2" 
-    label="Text" 
-    input-align="right" 
-    placeholder="Input Align"
-   />
-</template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        align1: '',
-        align2: ''
-      });
-      return {
-        state
-      };
-    }
-  }
-</script>
-```
-
-:::
 
 ### No Border
 
@@ -395,13 +278,11 @@ Use `label-align` prop to align the label, `input-align` prop to align the input
   <nut-input 
     v-model="state.noBorder1" 
     :border="false" 
-    label="Text" 
     placeholder="No Border" 
   />
   <nut-input 
     v-model="state.noBorder2" 
     :border="false" 
-    label="Text" 
     placeholder="No Border" 
   />
 </template>
@@ -430,9 +311,6 @@ Use `label-align` prop to align the label, `input-align` prop to align the input
 <template>
   <nut-input
     v-model="state.event"
-    label="Text"
-    left-icon="dongdong"
-    right-icon="ask2"
     clearable
     placeholder="Event"
     @update:model-value="change"
@@ -441,8 +319,6 @@ Use `label-align` prop to align the label, `input-align` prop to align the input
     @clear="clear"
     @click="click"
     @click-input="clickInput"
-    @click-left-icon="clickLeftIcon"
-    @click-right-icon="clickRightIcon"
   />
 </template>
 <script lang="ts">
@@ -470,12 +346,6 @@ Use `label-align` prop to align the label, `input-align` prop to align the input
       const clickInput = (event: Event) => {
         console.log('clickInput:', event);
       };
-      const clickLeftIcon = (event: Event) => {
-        console.log('clickLeftIcon:', event);
-      };
-      const clickRightIcon = (event: Event) => {
-        console.log('clickRightIcon:', event);
-      };
 
       return {
         state,
@@ -485,8 +355,6 @@ Use `label-align` prop to align the label, `input-align` prop to align the input
         focus,
         click,
         clickInput,
-        clickLeftIcon,
-        clickRightIcon
       };
     }
   }
@@ -500,14 +368,9 @@ Use `label-align` prop to align the label, `input-align` prop to align the input
 | Attribute   | Description               | Type       | Default  |
 |--------------|----------------------------------------|----------------|---------|
 | v-model      | Input value, two-way binding           | String         | -       |
-| type         | Input type, support all native types and `textarea` `number` `digit` type    | String         | `text`  |
+| type         | Input type, support all native types and `number` `digit` type    | String         | `text`  |
 | placeholder  | Placeholder when the input box is empty  | String         | -       |
-| label        | Left text                                | String         | -       |
-| label-class  | Left text extra class name               | String | -  |
-| label-width  | Label width, default unit is `px`        | String、Number | `80`    |
-| label-align  | Label align,  eg `left`、`center`、`right` | String | `left` |
 | input-align  | Input align, eg `left`、`center`、`right` | String | `left` |
-| colon        | Whether to display colon after label     | Boolean        | `false` |
 | required     | Whether to show required mark            | Boolean        | `false` |
 | border       | Whether to show inner borde         | Boolean        | `true` |
 | disabled     | Whether to disable field            | Boolean        | `false` |
@@ -515,16 +378,9 @@ Use `label-align` prop to align the label, `input-align` prop to align the input
 | autofocus    | Whether to auto focus, unsupported in iOS     | Boolean        | `false` |
 | max-length   | Max length of value                  | String、Number  | -       |
 | clearable    | Whether to be clearable              | Boolean        | `false`  |
-| clear-icon   | Clear Icon name, [name of icon](#/en-US/component/icon)           | String        | `mask-close`  |
 | clear-size   | Clear Icon `font-size`               | String        | `14`  |
-| left-icon    | Left side Icon name, [name of icon](#/en-US/component/icon) | String        | - |
-| right-icon   | Right side Icon name, [name of icon](#/en-US/component/icon) | String        | - |
-| left-icon-size    | Left side Icon `font-size`    | String        | `14`  |
-| right-icon-size   | Right side Icon `font-size`   | String        | `14`  |
 | show-word-limit | Whether to show word limit, need to set the `max-length` prop | Boolean | `false`  |
 | error         | Whether to mark the input content in red   | Boolean | `false`  |
-| error-message | Error message            | String、Number | - |
-| error-message-align | Error message align, eg `left`、`center`、`right`          | String | - |
 | formatter      | Input value formatter    | `(val: string) => string` | - |
 | format-trigger | When to format value, eg `onChange`、`onBlur` | String | - |
 | confirm-type | The text of the button in the lower right corner of the keyboard, only valid when `type='text'`, eg `send`, `search`, `next`, ` go`, `done` | String |   `done`   |
@@ -539,16 +395,11 @@ Use `label-align` prop to align the label, `input-align` prop to align the input
 | clear  | Emitted when the clear icon is clicked   | event  |
 | click  | Emitted when component is clicked	      | event  |
 | click-input      | Emitted when the input is clicked      | event  |
-| click-left-icon  | Emitted when the left icon is clicked      | event  |
-| click-right-icon | Emitted when the right icon is clicked      | event  |
 
 ### Slots
-
 | Name  | Description     | 
 |-------|----------|
-| button | Insert button |
-| input | Custom input |
-| rightExtra | Customize the rightmost area of the input box |
+| clear | Customize the end of the input box to clear the button |
 
 ## Theming
 
@@ -569,4 +420,3 @@ The component provides the following CSS variables, which can be used to customi
 
 
 
-

src/packages/__VUE/input/doc.md

@@ -8,17 +8,16 @@
 
 ``` javascript
 import { createApp } from 'vue';
-import { Input,Icon } from '@nutui/nutui';
+import { Input } from '@nutui/nutui';
 
 const app = createApp();
 app.use(Input);
-app.use(Icon);
 
 ```
 
 ### 基础用法
 
-可以通过 `v-model` 双向绑定输入框的值，通过 `label` 设置输入框左侧文本，通过 `placeholder` 设置占位提示文字。
+可以通过 `v-model` 双向绑定输入框的值，通过 `placeholder` 设置占位提示文字。
 
 :::demo
 
@@ -26,7 +25,6 @@ app.use(Icon);
 <template>
   <nut-input 
     v-model="state.text" 
-    label="文本" 
     placeholder="请输入文本" 
   />
 </template>
@@ -56,34 +54,24 @@ app.use(Icon);
 ```html
 <template>
   <nut-input 
-    label="文本" 
     placeholder="请输入文本" 
     v-model="state.text" 
   />
   <nut-input 
-    label="密码" 
     placeholder="请输入密码" 
     v-model="state.password" 
     type="password" 
   />
   <nut-input 
-    label="数字" 
     placeholder="请输入数字" 
     v-model="state.number" 
     type="number" 
   />
   <nut-input 
-    label="整数" 
     placeholder="请输入整数" 
     v-model="state.digit" 
     type="digit" 
   />
-  <nut-input 
-    label="手机号" 
-    placeholder="请输入手机号" 
-    v-model="state.tel" 
-    type="tel" 
-  />
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
@@ -94,7 +82,6 @@ app.use(Icon);
         password: '',
         number: '',
         digit: '',
-        tel: ''
       });
       return {
         state
@@ -115,13 +102,11 @@ app.use(Icon);
 ```html
 <template>
   <nut-input 
-    label="文本" 
     placeholder="输入框只读" 
     v-model="state.readonly" 
     readonly 
   />
   <nut-input 
-    label="文本" 
     placeholder="输入框已禁用" 
     v-model="state.disabled" 
     disabled 
@@ -145,37 +130,44 @@ app.use(Icon);
 
 :::
 
-### 显示图标
+### 显示清除图标
 
-通过 `left-icon` 和 `right-icon` 配置输入框两侧的图标，通过设置 `clearable` 在输入过程中展示清除图标。需要引用 `Icon` 组件
+通过设置 `clearable` 在输入过程中展示清除图标。
 
 :::demo
 
 ```html
 <template>
   <nut-input 
-    v-model="state.showIcon" 
-    label="文本" 
-    placeholder="显示图标" 
-    left-icon="dongdong" 
-    right-icon="ask2" 
-  />
-  <nut-input 
     v-model="state.clear" 
-    label="文本" 
     placeholder="显示清除图标" 
     clearable
     clearSize="14" 
   />
+  <nut-input
+      v-model="state.clear2"
+      :placeholder="translate('clear2')"
+      clearable
+      clearSize="14"
+      show-word-limit
+      max-length="50"
+    >
+      <template #clear>
+        <Close width="12" height="12" @click="clearValue"></Close>
+      </template>
+    </nut-input>
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
+  import { Close } from 
   export default {
+    components:{
+      Close
+    },
     setup() {
       const state = reactive({
-        showIcon: '',
-        required: '',
-        clear:''
+        clear:'',
+        clear2:''
       });
       return {
         state
@@ -187,41 +179,26 @@ app.use(Icon);
 
 :::
 
-### 错误提示
+### 配合表单使用
 
-设置 `required` 属性表示这是一个必填项，可以配合 `error` 或 `error-message` 属性显示对应的错误提示。
+结合nut-form与nut-form-item使用
 
 :::demo
 
 ```html
 <template>
-  <nut-input 
-    v-model="state.required" 
-    label="文本" 
-    placeholder="必填项" 
-    required 
-  />
-  <nut-input 
-    v-model="state.error1" 
-    label="文本" 
-    placeholder="输入内容标红" 
-    error 
-  />
-  <nut-input 
-    v-model="state.error2" 
-    label="文本" 
-    placeholder="底部错误提示文案" 
-    error-message="底部错误提示文案" 
-  />
+  <nut-form :model-value="state">
+    <nut-form-item label="文本" label-align="center">
+      <nut-input v-model="state.val1" placeholder="请输入文本" :border="false" />
+    </nut-form-item>
+  </nut-form>
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
   export default {
     setup() {
       const state = reactive({
-        required: '',
-        error1: '',
-        error2: '',
+        val1: '',
       });
       return {
         state
@@ -233,42 +210,6 @@ app.use(Icon);
 
 :::
 
-### 插入按钮
-
-通过 `button` 插槽可以在输入框尾部插入按钮。
-
-:::demo
-
-```html
-<template>
-  <nut-input 
-    v-model="state.buttonVal" 
-    label="短信验证码"
-    placeholder="请输入短信验证码"
-    clearable 
-    center 
-  >
-    <template #button>
-      <nut-button size="small" type="primary">发送验证码</nut-button>
-    </template>
-  </nut-input>
-</template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        buttonVal: ''
-      });
-      return {
-        state
-      };
-    }
-  }
-</script>
-```
-
-:::
 
 ### 格式化输入内容
 
@@ -280,14 +221,12 @@ app.use(Icon);
 <template>
   <nut-input 
     v-model="state.format1" 
-    label="文本" 
     placeholder="在输入时执行格式化" 
     :formatter="formatter" 
     format-trigger="onChange"
   />
   <nut-input
     v-model="state.format2"
-    label="文本"
     placeholder="在失焦时执行格式化"
     :formatter="formatter"
     format-trigger="onBlur"
@@ -322,9 +261,8 @@ app.use(Icon);
 ```html
 <template>
   <nut-input
-    v-model="state.textarea"
-    label="文本"
-    type="textarea"
+    v-model="state.text"
+    type="text"
     show-word-limit
     rows="2"
     max-length="50"
@@ -336,7 +274,7 @@ app.use(Icon);
   export default {
     setup() {
       const state = reactive({
-        textarea: ''
+        text: ''
       });
       return {
         state
@@ -348,44 +286,6 @@ app.use(Icon);
 
 :::
 
-### 对齐方式
-
-通过 `input-align` 属性可以设置输入框内容的对齐方式，可选值为 `left`、`center` 和 `right`。
-
-:::demo
-
-```html
-<template>
-  <nut-input 
-    v-model="state.align1" 
-    label="文本" 
-    label-align="right" 
-    placeholder="文本内容对齐" 
-  />
-  <nut-input 
-    v-model="state.align2" 
-    label="文本" 
-    input-align="right" 
-    placeholder="输入框内容对齐"
-   />
-</template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        align1: '',
-        align2: ''
-      });
-      return {
-        state
-      };
-    }
-  }
-</script>
-```
-
-:::
 
 ### 无边框
 
@@ -398,13 +298,11 @@ app.use(Icon);
   <nut-input 
     v-model="state.noBorder1" 
     :border="false" 
-    label="文本" 
     placeholder="输入框无边框" 
   />
   <nut-input 
     v-model="state.noBorder2" 
     :border="false" 
-    label="文本" 
     placeholder="输入框无边框" 
   />
 </template>
@@ -433,9 +331,6 @@ app.use(Icon);
 <template>
   <nut-input
     v-model="state.event"
-    label="文本"
-    left-icon="dongdong"
-    right-icon="ask2"
     clearable
     placeholder="事件演示"
     @update:model-value="change"
@@ -444,8 +339,6 @@ app.use(Icon);
     @clear="clear"
     @click="click"
     @click-input="clickInput"
-    @click-left-icon="clickLeftIcon"
-    @click-right-icon="clickRightIcon"
   />
 </template>
 <script lang="ts">
@@ -473,12 +366,6 @@ app.use(Icon);
       const clickInput = (event: Event) => {
         console.log('clickInput:', event);
       };
-      const clickLeftIcon = (event: Event) => {
-        console.log('clickLeftIcon:', event);
-      };
-      const clickRightIcon = (event: Event) => {
-        console.log('clickRightIcon:', event);
-      };
 
       return {
         state,
@@ -488,8 +375,6 @@ app.use(Icon);
         focus,
         click,
         clickInput,
-        clickLeftIcon,
-        clickRightIcon
       };
     }
   }
@@ -503,31 +388,18 @@ app.use(Icon);
 | 参数         | 说明                                   | 类型           | 默认值  |
 |--------------|----------------------------------------|----------------|---------|
 | v-model      | 输入值，双向绑定                       | String         | -       |
-| type         | 输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `textarea` `number` `digit`     | String         | `text`  |
+| type         | 输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `number` `digit`     | String         | `text`  |
 | placeholder  | 输入框为空时占位符                      | String         | -       |
-| label        | 左侧文本                              | String         | -       |
-| label-class  | 左侧文本额外类名                        | String | -  |
-| label-width  | 左侧文本宽度，默认单位为 `px`            | String、Number | `80`    |
-| label-align  | 左侧文本对齐方式，可选值 `left`、`center`、`right`   | String | `left` |
 | input-align  | 输入框内容对齐方式，可选值 `left`、`center`、`right` | String | `left` |
-| colon        | 是否在 label 后面添加冒号               | Boolean        | `false` |
-| required     | 左侧*号是否展示                        | Boolean        | `false` |
 | border       | 是否显示下边框                         | Boolean        | `true` |
 | disabled     | 是否禁用                              | Boolean        | `false` |
 | readonly     | 是否只读                              | Boolean        | `false` |
 | autofocus    | 是否自动获得焦点，iOS 系统不支持该属性     | Boolean        | `false` |
 | max-length      | 限制最长输入字符                       | String、Number  | -       |
 | clearable    | 展示清除 Icon                         | Boolean        | `false`  |
-| clear-icon   | 清除图标 Icon 名称或图片链接，[可参考 Icon 组件的 name 属性](#/zh-CN/component/icon)   | String        | `mask-close`  |
 | clear-size   | 清除图标的 `font-size` 大小           | String        | `14`  |
-| left-icon    | 左侧 Icon 名称或图片链接，[可参考 Icon 组件的 name 属性](#/zh-CN/component/icon) | String        | - |
-| right-icon   | 右侧 Icon 名称或图片链接，[可参考 Icon 组件的 name 属性](#/zh-CN/component/icon) | String        | - |
-| left-icon-size    | 左侧 Icon 的 `font-size` 大小           | String        | `14`  |
-| right-icon-size   | 右侧 Icon 的 `font-size` 大小           | String        | `14`  |
 | show-word-limit | 是否显示限制最长输入字符，需要设置 `max-length` 属性 | Boolean | `false`  |
 | error         | 是否标红                                | Boolean | `false`  |
-| error-message | 底部错误提示文案，为空时不展示            | String、Number | - |
-| error-message-align | 底部错误提示文案对齐方式，可选值 `left`、`center`、`right`          | String | - |
 | formatter      | 输入内容格式化函数    | `(val: string) => string` | - |
 | format-trigger | 格式化函数触发的时机，可选值为 `onChange`、`onBlur` | String | - |
 | confirm-type | 键盘右下角按钮的文字，仅在`type='text'`时生效,可选值 `send`：发送、`search`：搜索、`next`：下一个、`go`：前往、`done`：完成 | String |   `done`   |
@@ -542,15 +414,10 @@ app.use(Icon);
 | clear  | 点击清除按钮时触发   | event  |
 | click  | 点击组件时触发      | event  |
 | click-input      | 点击输入区域时触发      | event  |
-| click-left-icon  | 点击左侧图标时触发      | event  |
-| click-right-icon | 点击右侧图标时触发      | event  |
-
 ### Slots
 | 名称  | 说明     | 
 |-------|----------|
-| button | 自定义输入框尾部按钮 |
-| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
-| rightExtra | 自定义输入框最右侧的区域 |
+| clear | 自定义输入框尾部清除按钮 |
 
 ## 主题定制
 

src/packages/__VUE/input/doc.taro.md

@@ -8,17 +8,16 @@
 
 ``` javascript
 import { createApp } from 'vue';
-import { Input,Icon } from '@nutui/nutui-taro';
+import { Input } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Input);
-app.use(Icon);
 
 ```
 
 ### 基础用法
 
-可以通过 `v-model` 双向绑定输入框的值，通过 `label` 设置输入框左侧文本，通过 `placeholder` 设置占位提示文字。
+可以通过 `v-model` 双向绑定输入框的值，通过 `placeholder` 设置占位提示文字。
 
 :::demo
 
@@ -26,7 +25,6 @@ app.use(Icon);
 <template>
   <nut-input 
     v-model="state.text" 
-    label="文本" 
     placeholder="请输入文本" 
   />
 </template>
@@ -56,34 +54,24 @@ app.use(Icon);
 ```html
 <template>
   <nut-input 
-    label="文本" 
     placeholder="请输入文本" 
     v-model="state.text" 
   />
   <nut-input 
-    label="密码" 
     placeholder="请输入密码" 
     v-model="state.password" 
     type="password" 
   />
   <nut-input 
-    label="数字" 
     placeholder="请输入数字" 
     v-model="state.number" 
     type="number" 
   />
   <nut-input 
-    label="整数" 
     placeholder="请输入整数" 
     v-model="state.digit" 
     type="digit" 
   />
-  <nut-input 
-    label="手机号" 
-    placeholder="请输入手机号" 
-    v-model="state.tel" 
-    type="tel" 
-  />
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
@@ -94,7 +82,6 @@ app.use(Icon);
         password: '',
         number: '',
         digit: '',
-        tel: ''
       });
       return {
         state
@@ -115,13 +102,11 @@ app.use(Icon);
 ```html
 <template>
   <nut-input 
-    label="文本" 
     placeholder="输入框只读" 
     v-model="state.readonly" 
     readonly 
   />
   <nut-input 
-    label="文本" 
     placeholder="输入框已禁用" 
     v-model="state.disabled" 
     disabled 
@@ -145,24 +130,16 @@ app.use(Icon);
 
 :::
 
-### 显示图标
+### 显示清除图标
 
-通过 `left-icon` 和 `right-icon` 配置输入框两侧的图标，通过设置 `clearable` 在输入过程中展示清除图标。需要引用 `Icon` 组件
+通过设置 `clearable` 在输入过程中展示清除图标。
 
 :::demo
 
 ```html
 <template>
   <nut-input 
-    v-model="state.showIcon" 
-    label="文本" 
-    placeholder="显示图标" 
-    left-icon="dongdong" 
-    right-icon="ask2" 
-  />
-  <nut-input 
     v-model="state.clear" 
-    label="文本" 
     placeholder="显示清除图标" 
     clearable
     clearSize="14" 
@@ -173,8 +150,6 @@ app.use(Icon);
   export default {
     setup() {
       const state = reactive({
-        showIcon: '',
-        required: '',
         clear:''
       });
       return {
@@ -187,41 +162,27 @@ app.use(Icon);
 
 :::
 
-### 错误提示
 
-设置 `required` 属性表示这是一个必填项，可以配合 `error` 或 `error-message` 属性显示对应的错误提示。
+### 配合表单使用
+
+结合nut-form与nut-form-item使用
 
 :::demo
 
 ```html
 <template>
-  <nut-input 
-    v-model="state.required" 
-    label="文本" 
-    placeholder="必填项" 
-    required 
-  />
-  <nut-input 
-    v-model="state.error1" 
-    label="文本" 
-    placeholder="输入内容标红" 
-    error 
-  />
-  <nut-input 
-    v-model="state.error2" 
-    label="文本" 
-    placeholder="底部错误提示文案" 
-    error-message="底部错误提示文案" 
-  />
+  <nut-form :model-value="state">
+    <nut-form-item label="文本" label-align="center">
+      <nut-input v-model="state.val1" placeholder="请输入文本" :border="false" />
+    </nut-form-item>
+  </nut-form>
 </template>
 <script lang="ts">
   import { reactive } from 'vue';
   export default {
     setup() {
       const state = reactive({
-        required: '',
-        error1: '',
-        error2: '',
+        val1: '',
       });
       return {
         state
@@ -233,42 +194,7 @@ app.use(Icon);
 
 :::
 
-### 插入按钮
-
-通过 `button` 插槽可以在输入框尾部插入按钮。
-
-:::demo
-
-```html
-<template>
-  <nut-input 
-    v-model="state.buttonVal" 
-    label="短信验证码"
-    placeholder="请输入短信验证码"
-    clearable 
-    center 
-  >
-    <template #button>
-      <nut-button size="small" type="primary">发送验证码</nut-button>
-    </template>
-  </nut-input>
-</template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        buttonVal: ''
-      });
-      return {
-        state
-      };
-    }
-  }
-</script>
-```
 
-:::
 
 ### 格式化输入内容
 
@@ -280,14 +206,12 @@ app.use(Icon);
 <template>
   <nut-input 
     v-model="state.format1" 
-    label="文本" 
     placeholder="在输入时执行格式化" 
     :formatter="formatter" 
     format-trigger="onChange"
   />
   <nut-input
     v-model="state.format2"
-    label="文本"
     placeholder="在失焦时执行格式化"
     :formatter="formatter"
     format-trigger="onBlur"
@@ -322,9 +246,8 @@ app.use(Icon);
 ```html
 <template>
   <nut-input
-    v-model="state.textarea"
-    label="文本"
-    type="textarea"
+    v-model="state.text"
+    type="text"
     show-word-limit
     rows="2"
     max-length="50"
@@ -336,7 +259,7 @@ app.use(Icon);
   export default {
     setup() {
       const state = reactive({
-        textarea: ''
+        text: ''
       });
       return {
         state
@@ -348,44 +271,6 @@ app.use(Icon);
 
 :::
 
-### 对齐方式
-
-通过 `input-align` 属性可以设置输入框内容的对齐方式，可选值为 `left`、`center` 和 `right`。
-
-:::demo
-
-```html
-<template>
-  <nut-input 
-    v-model="state.align1" 
-    label="文本" 
-    label-align="right" 
-    placeholder="文本内容对齐" 
-  />
-  <nut-input 
-    v-model="state.align2" 
-    label="文本" 
-    input-align="right" 
-    placeholder="输入框内容对齐"
-   />
-</template>
-<script lang="ts">
-  import { reactive } from 'vue';
-  export default {
-    setup() {
-      const state = reactive({
-        align1: '',
-        align2: ''
-      });
-      return {
-        state
-      };
-    }
-  }
-</script>
-```
-
-:::
 
 ### 无边框
 
@@ -398,13 +283,11 @@ app.use(Icon);
   <nut-input 
     v-model="state.noBorder1" 
     :border="false" 
-    label="文本" 
     placeholder="输入框无边框" 
   />
   <nut-input 
     v-model="state.noBorder2" 
     :border="false" 
-    label="文本" 
     placeholder="输入框无边框" 
   />
 </template>
@@ -433,9 +316,6 @@ app.use(Icon);
 <template>
   <nut-input
     v-model="state.event"
-    label="文本"
-    left-icon="dongdong"
-    right-icon="ask2"
     clearable
     placeholder="事件演示"
     @update:model-value="change"
@@ -444,8 +324,6 @@ app.use(Icon);
     @clear="clear"
     @click="click"
     @click-input="clickInput"
-    @click-left-icon="clickLeftIcon"
-    @click-right-icon="clickRightIcon"
   />
 </template>
 <script lang="ts">
@@ -473,13 +351,6 @@ app.use(Icon);
       const clickInput = (event: Event) => {
         console.log('clickInput:', event);
       };
-      const clickLeftIcon = (event: Event) => {
-        console.log('clickLeftIcon:', event);
-      };
-      const clickRightIcon = (event: Event) => {
-        console.log('clickRightIcon:', event);
-      };
-
       return {
         state,
         change,
@@ -488,8 +359,6 @@ app.use(Icon);
         focus,
         click,
         clickInput,
-        clickLeftIcon,
-        clickRightIcon
       };
     }
   }
@@ -503,31 +372,18 @@ app.use(Icon);
 | 参数         | 说明                                   | 类型           | 默认值  |
 |--------------|----------------------------------------|----------------|---------|
 | v-model      | 输入值，双向绑定                       | String         | -       |
-| type         | 输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `textarea` `number` `digit`     | String         | `text`  |
+| type         | 输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `number` `digit`     | String         | `text`  |
 | placeholder  | 输入框为空时占位符                      | String         | -       |
-| label        | 左侧文本                              | String         | -       |
-| label-class  | 左侧文本额外类名                        | String | -  |
-| label-width  | 左侧文本宽度，默认单位为 `px`            | String、Number | `80`    |
-| label-align  | 左侧文本对齐方式，可选值 `left`、`center`、`right`   | String | `left` |
 | input-align  | 输入框内容对齐方式，可选值 `left`、`center`、`right` | String | `left` |
-| colon        | 是否在 label 后面添加冒号               | Boolean        | `false` |
-| required     | 左侧*号是否展示                        | Boolean        | `false` |
 | border       | 是否显示下边框                         | Boolean        | `true` |
 | disabled     | 是否禁用                              | Boolean        | `false` |
 | readonly     | 是否只读                              | Boolean        | `false` |
 | autofocus    | 是否自动获得焦点，iOS 系统不支持该属性     | Boolean        | `false` |
 | max-length      | 限制最长输入字符                       | String、Number  | -       |
 | clearable    | 展示清除 Icon                         | Boolean        | `false`  |
-| clear-icon   | 清除图标 Icon 名称或图片链接，[可参考 Icon 组件的 name 属性](#/zh-CN/component/icon)   | String        | `mask-close`  |
 | clear-size   | 清除图标的 `font-size` 大小           | String        | `14`  |
-| left-icon    | 左侧 Icon 名称或图片链接，[可参考 Icon 组件的 name 属性](#/zh-CN/component/icon) | String        | - |
-| right-icon   | 右侧 Icon 名称或图片链接，[可参考 Icon 组件的 name 属性](#/zh-CN/component/icon) | String        | - |
-| left-icon-size    | 左侧 Icon 的 `font-size` 大小           | String        | `14`  |
-| right-icon-size   | 右侧 Icon 的 `font-size` 大小           | String        | `14`  |
 | show-word-limit | 是否显示限制最长输入字符，需要设置 `max-length` 属性 | Boolean | `false`  |
 | error         | 是否标红                                | Boolean | `false`  |
-| error-message | 底部错误提示文案，为空时不展示            | String、Number | - |
-| error-message-align | 底部错误提示文案对齐方式，可选值 `left`、`center`、`right`          | String | - |
 | formatter      | 输入内容格式化函数    | `(val: string) => string` | - |
 | format-trigger | 格式化函数触发的时机，可选值为 `onChange`、`onBlur` | String | - |
 | confirm-type | 键盘右下角按钮的文字，仅在`type='text'`时生效,可选值 `send`：发送、`search`：搜索、`next`：下一个、`go`：前往、`done`：完成 | String |   `done`   |
@@ -544,15 +400,11 @@ app.use(Icon);
 | clear  | 点击清除按钮时触发   | event  |
 | click  | 点击组件时触发      | event  |
 | click-input      | 点击输入区域时触发      | event  |
-| click-left-icon  | 点击左侧图标时触发      | event  |
-| click-right-icon | 点击右侧图标时触发      | event  |
 
 ### Slots
 | 名称  | 说明     | 
 |-------|----------|
-| button | 自定义输入框尾部按钮 |
-| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
-| rightExtra | 自定义输入框最右侧的区域 |
+| clear | 自定义输入框尾部清除按钮 |
 
 ## 主题定制
 

src/packages/__VUE/input/index.scss

@@ -41,7 +41,7 @@ textarea {
 
   .input-text,
   &__text--readonly {
-    width: 90%;
+    width: 100%;
     padding: 0;
     // padding-right: 35px;
     line-height: inherit;
@@ -51,6 +51,7 @@ textarea {
     text-decoration: none;
     background: transparent;
     resize: none;
+    flex: 1;
   }
 
   &__label {
@@ -71,6 +72,7 @@ textarea {
   &-box {
     position: relative;
     width: 100%;
+    display: flex;
   }
   &-disabled-mask {
     position: absolute;
@@ -80,16 +82,14 @@ textarea {
     left: 0;
     z-index: 2;
   }
-  &-error-message {
-    color: $input-required-color;
-    font-size: 12px;
-  }
   &-word-limit {
     display: flex;
     justify-content: flex-end;
-    margin-top: 4px;
     color: #808080;
     font-size: 12px;
+    padding: 0 10px;
+    // margin-top: -50%;
+    // line-height: var(--van-field-word-limit-line-height);
   }
   &-left-icon,
   &-right-icon {
@@ -137,9 +137,17 @@ textarea {
       -webkit-text-fill-color: $input-disabled-color;
     }
   }
-  &-error,
-  &-error::placeholder {
+  &--error,
+  &--error::placeholder {
     color: $input-required-color;
     -webkit-text-fill-color: $input-required-color;
   }
 }
+
+.nut-form-item {
+  .nut-input {
+    padding: 0px;
+    margin: 0px;
+    line-height: var(--nut-cell-line-height);
+  }
+}

src/packages/__VUE/input/index.taro.vue

@@ -1,92 +1,48 @@
 <template>
   <view :class="classes">
-    <view v-if="leftIcon && leftIcon.length > 0" class="nut-input-left-icon" @click="onClickLeftIcon">
-      <nut-icon :name="leftIcon" v-bind="$attrs" :size="leftIconSize"></nut-icon>
-    </view>
-    <view
-      v-if="label"
-      class="nut-input__label"
-      :class="labelClass"
-      :style="{
-        width: `${labelWidth}px`,
-        textAlign: labelAlign
-      }"
-    >
-      <view class="nut-input__label-string">
-        {{ label }}
-        {{ colon ? ':' : '' }}
-      </view>
-    </view>
-    <template v-if="$slots.input">
-      <view class="nut-input-value">
-        <view class="nut-input-inner" @click="onClickInput">
-          <slot name="input"></slot>
-        </view>
-      </view>
-    </template>
-    <template v-else>
-      <view class="nut-input-value">
-        <view class="nut-input-inner">
-          <view class="nut-input-box">
-            <component
-              :is="renderInput(type)"
-              class="input-text"
-              ref="inputRef"
-              :style="styles"
-              :maxlength="maxLength"
-              :placeholder="placeholder"
-              :disabled="disabled"
-              :readonly="readonly"
-              :value="modelValue"
-              :formatTrigger="formatTrigger"
-              :autofocus="autofocus"
-              :enterkeyhint="confirmType"
-              @input="onInput"
-              @focus="onFocus"
-              @blur="onBlur"
-              @click="onClickInput"
-            ></component>
-            <view v-if="readonly" class="nut-input-disabled-mask" @click="onClickInput"></view>
-          </view>
-          <view class="nut-input-clear-box">
-            <nut-icon
-              class="nut-input-clear"
-              v-if="clearable && !readonly"
-              v-show="active && modelValue.length > 0"
-              :name="clearIcon"
-              v-bind="$attrs"
-              :size="clearSize"
-              @click="clear"
-            >
-            </nut-icon>
+    <view class="nut-input-value">
+      <view class="nut-input-inner">
+        <view class="nut-input-box">
+          <component
+            :is="renderInput(type)"
+            class="input-text"
+            ref="inputRef"
+            :style="styles"
+            :maxlength="maxLength"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            :readonly="readonly"
+            :value="modelValue"
+            :formatTrigger="formatTrigger"
+            :autofocus="autofocus"
+            :enterkeyhint="confirmType"
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur"
+            @click="onClickInput"
+            :adjust-position="adjustPosition"
+            :always-system="alwaysSystem"
+          ></component>
+          <view v-if="readonly" class="nut-input-disabled-mask" @click="onClickInput"></view>
+          <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
+            <span class="nut-input-word-num">{{ modelValue ? modelValue.length : 0 }}</span
+            >/{{ maxLength }}
           </view>
-          <view v-if="rightIcon && rightIcon.length > 0" class="nut-input-right-icon" @click="onClickRightIcon">
-            <nut-icon :name="rightIcon" v-bind="$attrs" :size="rightIconSize"></nut-icon>
-          </view>
-          <slot v-if="$slots.button" name="button" class="nut-input-button"></slot>
-          <slot v-if="$slots.rightExtra" name="rightExtra"></slot>
-        </view>
-        <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
-          <span class="nut-input-word-num">{{ modelValue ? modelValue.length : 0 }}</span
-          >/{{ maxLength }}
         </view>
-        <view
-          v-if="errorMessage"
-          class="nut-input-error-message"
-          :style="{
-            textAlign: errorMessageAlign
-          }"
-        >
-          {{ errorMessage }}
+        <view class="nut-input-clear-box" v-if="clearable && !readonly" v-show="active && modelValue.length > 0">
+          <slot name="clear">
+            <MaskClose class="nut-input-clear" v-bind="$attrs" :size="clearSize" @click="clear"> </MaskClose>
+          </slot>
         </view>
       </view>
-    </template>
+    </view>
   </view>
 </template>
 <script lang="ts">
 import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, InputHTMLAttributes, h } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { formatNumber } from './util';
+import { MaskClose } from '@nutui/icons-vue-taro';
 
 const { componentName, create } = createComponent('input');
 
@@ -118,26 +74,6 @@ export default create({
       type: String,
       default: ''
     },
-    label: {
-      type: String,
-      default: ''
-    },
-    labelClass: {
-      type: String,
-      default: ''
-    },
-    labelWidth: {
-      type: [String, Number],
-      default: '80'
-    },
-    labelAlign: {
-      type: String as PropType<InputAlignType>,
-      default: 'left'
-    },
-    colon: {
-      type: Boolean,
-      default: false
-    },
     inputAlign: {
       type: String,
       default: 'left'
@@ -166,30 +102,10 @@ export default create({
       type: [String, Number],
       default: '9999'
     },
-    leftIconSize: {
-      type: [String, Number],
-      default: ''
-    },
-    leftIcon: {
-      type: String,
-      default: ''
-    },
-    rightIcon: {
-      type: String,
-      default: ''
-    },
-    rightIconSize: {
-      type: [String, Number],
-      default: ''
-    },
     clearable: {
       type: Boolean,
       default: false
     },
-    clearIcon: {
-      type: String,
-      default: 'mask-close'
-    },
     clearSize: {
       type: [String, Number],
       default: '14'
@@ -210,14 +126,6 @@ export default create({
       type: Array as PropType<InputRule>,
       default: []
     },
-    errorMessage: {
-      type: String,
-      default: ''
-    },
-    errorMessageAlign: {
-      type: String as PropType<InputAlignType>,
-      default: ''
-    },
     rows: {
       type: [String, Number],
       default: null
@@ -243,18 +151,8 @@ export default create({
       default: false
     }
   },
-
-  emits: [
-    'update:modelValue',
-    'change',
-    'blur',
-    'focus',
-    'clear',
-    'keypress',
-    'click-input',
-    'click-left-icon',
-    'click-right-icon'
-  ],
+  components: { MaskClose },
+  emits: ['update:modelValue', 'change', 'blur', 'focus', 'clear', 'keypress', 'click-input'],
 
   setup(props, { emit, slots }) {
     const active = ref(false);
@@ -263,8 +161,8 @@ export default create({
     const getModelValue = () => String(props.modelValue ?? '');
 
     const renderInput = (type: InputType) => {
-      return h(type == 'textarea' ? 'textarea' : 'input', {
-        style: type == 'textarea' ? stylesTextarea : styles,
+      return h('input', {
+        style: styles,
         type: type != 'textarea' && inputType(type)
       });
     };
@@ -292,12 +190,6 @@ export default create({
         textAlign: props.inputAlign
       };
     });
-    const stylesTextarea: ComputedRef = computed(() => {
-      return {
-        textAlign: props.inputAlign,
-        height: Number(props.rows) * 24 + 'px'
-      };
-    });
 
     const inputType = (type: InputType) => {
       if (type === 'number') {
@@ -372,6 +264,8 @@ export default create({
     const clear = (event: Event) => {
       event.stopPropagation();
       if (props.disabled) return;
+      emit('update:modelValue', '', event);
+      emit('change', '', event);
       emit('clear', '', event);
     };
 
@@ -389,22 +283,6 @@ export default create({
       emit('click-input', event);
     };
 
-    const onClickLeftIcon = (event: MouseEvent) => {
-      event.stopPropagation();
-      if (props.disabled) {
-        return;
-      }
-      emit('click-left-icon', event);
-    };
-
-    const onClickRightIcon = (event: MouseEvent) => {
-      event.stopPropagation();
-      if (props.disabled) {
-        return;
-      }
-      emit('click-right-icon', event);
-    };
-
     watch(
       () => props.modelValue,
       () => {
@@ -430,15 +308,12 @@ export default create({
       active,
       classes,
       styles,
-      stylesTextarea,
       inputType,
       onInput,
       onFocus,
       onBlur,
       clear,
-      onClickInput,
-      onClickLeftIcon,
-      onClickRightIcon
+      onClickInput
     };
   }
 });

src/packages/__VUE/input/index.vue

@@ -1,91 +1,45 @@
 <template>
   <view :class="classes">
-    <view v-if="leftIcon && leftIcon.length > 0" class="nut-input-left-icon" @click="onClickLeftIcon">
-      <nut-icon :name="leftIcon" v-bind="$attrs" :size="leftIconSize"></nut-icon>
-    </view>
-    <view
-      v-if="label"
-      class="nut-input__label"
-      :class="labelClass"
-      :style="{
-        width: `${labelWidth}px`,
-        textAlign: labelAlign
-      }"
-    >
-      <view class="nut-input__label-string">
-        {{ label }}
-        {{ colon ? ':' : '' }}
-      </view>
-    </view>
-    <template v-if="$slots.input">
-      <view class="nut-input-value">
-        <view class="nut-input-inner" @click="onClickInput">
-          <slot name="input"></slot>
-        </view>
-      </view>
-    </template>
-    <template v-else>
-      <view class="nut-input-value">
-        <view class="nut-input-inner">
-          <view class="nut-input-box">
-            <component
-              :is="renderInput(type)"
-              class="input-text"
-              ref="inputRef"
-              :style="styles"
-              :maxlength="maxLength"
-              :placeholder="placeholder"
-              :disabled="disabled"
-              :readonly="readonly"
-              :value="modelValue"
-              :formatTrigger="formatTrigger"
-              :autofocus="autofocus"
-              :enterkeyhint="confirmType"
-              @input="onInput"
-              @focus="onFocus"
-              @blur="onBlur"
-              @click="onClickInput"
-            ></component>
-          </view>
-          <view class="nut-input-clear-box">
-            <nut-icon
-              class="nut-input-clear"
-              v-if="clearable && !readonly"
-              v-show="active && modelValue.length > 0"
-              :name="clearIcon"
-              v-bind="$attrs"
-              :size="clearSize"
-              @click="clear"
-            >
-            </nut-icon>
+    <view class="nut-input-value">
+      <view class="nut-input-inner">
+        <view class="nut-input-box">
+          <component
+            :is="renderInput(type)"
+            class="input-text"
+            ref="inputRef"
+            :style="styles"
+            :maxlength="maxLength"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            :readonly="readonly"
+            :value="modelValue"
+            :formatTrigger="formatTrigger"
+            :autofocus="autofocus"
+            :enterkeyhint="confirmType"
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur"
+            @click="onClickInput"
+          ></component>
+          <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
+            <span class="nut-input-word-num">{{ modelValue ? modelValue.length : 0 }}</span
+            >/{{ maxLength }}
           </view>
-          <view v-if="rightIcon && rightIcon.length > 0" class="nut-input-right-icon" @click="onClickRightIcon">
-            <nut-icon :name="rightIcon" v-bind="$attrs" :size="rightIconSize"></nut-icon>
-          </view>
-          <slot v-if="$slots.button" name="button" class="nut-input-button"></slot>
-          <slot v-if="$slots.rightExtra" name="rightExtra"></slot>
-        </view>
-        <view v-if="showWordLimit && maxLength" class="nut-input-word-limit">
-          <span class="nut-input-word-num">{{ modelValue ? modelValue.length : 0 }}</span
-          >/{{ maxLength }}
         </view>
-        <view
-          v-if="errorMessage"
-          class="nut-input-error-message"
-          :style="{
-            textAlign: errorMessageAlign
-          }"
-        >
-          {{ errorMessage }}
+        <view class="nut-input-clear-box" v-if="clearable && !readonly" v-show="active && modelValue.length > 0">
+          <slot name="clear">
+            <MaskClose class="nut-input-clear" v-bind="$attrs" :size="clearSize" @click="clear"> </MaskClose>
+          </slot>
         </view>
       </view>
-    </template>
+    </view>
   </view>
 </template>
 <script lang="ts">
 import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, InputHTMLAttributes, h } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { formatNumber } from './util';
+import { MaskClose } from '@nutui/icons-vue';
 
 const { componentName, create } = createComponent('input');
 
@@ -117,26 +71,6 @@ export default create({
       type: String,
       default: ''
     },
-    label: {
-      type: String,
-      default: ''
-    },
-    labelClass: {
-      type: String,
-      default: ''
-    },
-    labelWidth: {
-      type: [String, Number],
-      default: '80'
-    },
-    labelAlign: {
-      type: String as PropType<InputAlignType>,
-      default: 'left'
-    },
-    colon: {
-      type: Boolean,
-      default: false
-    },
     inputAlign: {
       type: String,
       default: 'left'
@@ -157,38 +91,14 @@ export default create({
       type: Boolean,
       default: false
     },
-    error: {
-      type: Boolean,
-      default: false
-    },
     maxLength: {
       type: [String, Number],
       default: '9999'
     },
-    leftIcon: {
-      type: String,
-      default: ''
-    },
-    leftIconSize: {
-      type: [String, Number],
-      default: ''
-    },
-    rightIcon: {
-      type: String,
-      default: ''
-    },
-    rightIconSize: {
-      type: [String, Number],
-      default: ''
-    },
     clearable: {
       type: Boolean,
       default: false
     },
-    clearIcon: {
-      type: String,
-      default: 'mask-close'
-    },
     clearSize: {
       type: [String, Number],
       default: '14'
@@ -209,14 +119,6 @@ export default create({
       type: Array as PropType<InputRule>,
       default: []
     },
-    errorMessage: {
-      type: String,
-      default: ''
-    },
-    errorMessageAlign: {
-      type: String as PropType<InputAlignType>,
-      default: ''
-    },
     rows: {
       type: [String, Number],
       default: null
@@ -232,20 +134,15 @@ export default create({
     confirmType: {
       type: String as PropType<import('./type').ConfirmTextType>,
       default: 'done'
+    },
+    error: {
+      type: Boolean,
+      default: false
     }
   },
+  components: { MaskClose },
 
-  emits: [
-    'update:modelValue',
-    'change',
-    'blur',
-    'focus',
-    'clear',
-    'keypress',
-    'click-input',
-    'click-left-icon',
-    'click-right-icon'
-  ],
+  emits: ['update:modelValue', 'change', 'blur', 'focus', 'clear', 'keypress', 'click-input'],
 
   setup(props, { emit, slots }) {
     const active = ref(false);
@@ -253,8 +150,8 @@ export default create({
     const getModelValue = () => String(props.modelValue ?? '');
 
     const renderInput = (type: InputType) => {
-      return h(type == 'textarea' ? 'textarea' : 'input', {
-        style: type == 'textarea' ? stylesTextarea : styles,
+      return h('input', {
+        style: styles,
         type: type != 'textarea' && inputType(type)
       });
     };
@@ -282,12 +179,6 @@ export default create({
         textAlign: props.inputAlign
       };
     });
-    const stylesTextarea: ComputedRef = computed(() => {
-      return {
-        textAlign: props.inputAlign,
-        height: Number(props.rows) * 24 + 'px'
-      };
-    });
 
     const inputType = (type: InputType) => {
       if (type === 'number') {
@@ -362,6 +253,8 @@ export default create({
     const clear = (event: Event) => {
       event.stopPropagation();
       if (props.disabled) return;
+      emit('update:modelValue', '', event);
+      emit('change', '', event);
       emit('clear', '', event);
     };
 
@@ -379,22 +272,6 @@ export default create({
       emit('click-input', event);
     };
 
-    const onClickLeftIcon = (event: MouseEvent) => {
-      event.stopPropagation();
-      if (props.disabled) {
-        return;
-      }
-      emit('click-left-icon', event);
-    };
-
-    const onClickRightIcon = (event: MouseEvent) => {
-      event.stopPropagation();
-      if (props.disabled) {
-        return;
-      }
-      emit('click-right-icon', event);
-    };
-
     watch(
       () => props.modelValue,
       () => {
@@ -417,15 +294,12 @@ export default create({
       active,
       classes,
       styles,
-      stylesTextarea,
       inputType,
       onInput,
       onFocus,
       onBlur,
       clear,
-      onClickInput,
-      onClickLeftIcon,
-      onClickRightIcon
+      onClickInput
     };
   }
 });

src/packages/__VUE/tabbar/demo.vue

@@ -44,12 +44,10 @@
         </template>
       </nut-tabbar-item>
       <nut-tabbar-item :tab-title="translate('title')">
-        <template #icon="props">
-          <img :src="props.active ? icon.active : icon.unactive" alt="" /> </template
+        <template #icon="props"> <img :src="props.active ? icon.active : icon.unactive" alt="" /> </template
       ></nut-tabbar-item>
       <nut-tabbar-item :tab-title="translate('title')">
-        <template #icon="props">
-          <img :src="props.active ? icon.active : icon.unactive" alt="" /> </template
+        <template #icon="props"> <img :src="props.active ? icon.active : icon.unactive" alt="" /> </template
       ></nut-tabbar-item>
     </nut-tabbar>
 

src/sites/mobile-taro/vue/src/dentry/pages/input/index.vue

@@ -1,40 +1,43 @@
 <template>
   <div class="demo full">
     <h2>基础用法</h2>
-    <nut-input placeholder="文本" v-model="state.val1" label="文本" />
+    <nut-input placeholder="文本" v-model="state.val1" />
 
     <h2>自定义类型</h2>
-    <nut-input label="文本" v-model="state.text" placeholder="文本" />
-    <nut-input label="密码" v-model="state.password" type="password" placeholder="密码" />
-    <nut-input label="数字" v-model="state.number" type="number" placeholder="数字" />
-    <nut-input label="整数" v-model="state.digit" type="digit" placeholder="整数" />
-    <nut-input label="手机号" v-model="state.tel" type="tel" placeholder="手机号" />
+    <nut-input v-model="state.text" placeholder="文本" />
+    <nut-input v-model="state.password" type="password" placeholder="密码" />
+    <nut-input v-model="state.number" type="number" placeholder="数字" />
+    <nut-input v-model="state.digit" type="digit" placeholder="整数" />
 
     <h2>禁用和只读</h2>
-    <nut-input v-model="state.readonly" readonly label="文本" placeholder="只读" />
-    <nut-input v-model="state.disabled" disabled label="文本" placeholder="禁用" />
+    <nut-input v-model="state.readonly" readonly placeholder="只读" />
+    <nut-input v-model="state.disabled" disabled placeholder="禁用" />
 
-    <h2>显示图标</h2>
-    <nut-input v-model="state.showIcon" label="文本" left-icon="dongdong" right-icon="ask2" placeholder="显示图标" />
-    <nut-input v-model="state.clear" label="文本" clearable clearSize="14" placeholder="显示清除图标" />
-
-    <h2>错误提示</h2>
-    <nut-input v-model="state.required" label="文本" required placeholder="必填项" />
-    <nut-input v-model="state.error1" label="文本" error placeholder="输入内容标红" />
-    <nut-input v-model="state.error2" label="文本" error-message="底部错误提示文案" placeholder="底部错误提示文案" />
-
-    <h2>插入按钮</h2>
-    <nut-input v-model="state.buttonVal" clearable center label="短信验证码" placeholder="请输入短信验证码">
-      <template #button>
-        <nut-button size="small" type="primary"> 发送验证码 </nut-button>
+    <h2>显示清除图标</h2>
+    <nut-input v-model="state.clear" clearable clearSize="14" placeholder="显示清除图标" />
+    <nut-input
+      v-model="state.clear2"
+      placeholder="自定义清除图标"
+      clearable
+      clearSize="14"
+      show-word-limit
+      max-length="50"
+    >
+      <template #clear>
+        <Close width="12" height="12" size="12" @click="clearValue"></Close>
       </template>
     </nut-input>
+    <h2>配合表单使用</h2>
+    <nut-form :model-value="state">
+      <nut-form-item label-align="center" label="文本">
+        <nut-input v-model="state.val2" placeholder="请输入文本" :border="false" />
+      </nut-form-item>
+    </nut-form>
 
     <h2>格式化输入内容</h2>
-    <nut-input v-model="state.format1" label="文本" :formatter="formatter" placeholder="在输入时执行格式化" />
+    <nut-input v-model="state.format1" :formatter="formatter" placeholder="在输入时执行格式化" />
     <nut-input
       v-model="state.format2"
-      label="文本"
       :formatter="formatter"
       format-trigger="onBlur"
       placeholder="在失焦时执行格式化"
@@ -43,8 +46,7 @@
     <h2>显示字数统计</h2>
     <nut-input
       v-model="state.textarea"
-      label="留言"
-      type="textarea"
+      type="text"
       show-word-limit
       rows="2"
       maxLength="50"
@@ -52,21 +54,14 @@
       :adjust-position="state.adjustPosition"
     />
 
-    <h2>对齐方式</h2>
-    <nut-input v-model="state.align1" label="文本" label-align="right" placeholder="文本内容对齐" />
-    <nut-input v-model="state.align2" label="文本" input-align="right" placeholder="输入框内容对齐" />
-
     <h2>无边框</h2>
-    <nut-input v-model="state.disabled" :border="false" label="无边框" placeholder="无边框" />
-    <nut-input v-model="state.showIcon" :border="false" label="无边框" placeholder="无边框" />
+    <nut-input v-model="state.disabled" :border="false" placeholder="无边框" />
+    <nut-input v-model="state.showIcon" :border="false" placeholder="无边框" />
 
     <h2>点击事件</h2>
     <nut-input
       v-model="state.event"
-      label="event"
       placeholder="点击"
-      left-icon="dongdong"
-      right-icon="ask2"
       clearable
       :adjust-position="state.adjustPosition"
       @update:model-value="change"
@@ -75,19 +70,21 @@
       @clear="clear"
       @click="click"
       @click-input="clickInput"
-      @click-left-icon="clickLeftIcon"
-      @click-right-icon="clickRightIcon"
     />
   </div>
 </template>
 
 <script lang="ts">
 import { reactive } from 'vue';
-
+import { Close } from '@nutui/icons-vue-taro';
 export default {
+  components: {
+    Close
+  },
   setup() {
     const state = reactive({
       val1: '',
+      val2: '',
       text: '',
       password: '',
       number: '',
@@ -106,6 +103,8 @@ export default {
       align1: '',
       align2: '',
       event: '',
+      clear: '',
+      clear2: '',
       adjustPosition: false
     });
     setTimeout(function () {
@@ -129,14 +128,10 @@ export default {
     const clickInput = (value: string | number) => {
       console.log('clickInput:', value);
     };
-    const clickLeftIcon = (value: string | number) => {
-      console.log('clickLeftIcon:', value);
-    };
-    const clickRightIcon = (value: string | number) => {
-      console.log('clickRightIcon:', value);
-    };
     const formatter = (value: string) => value.replace(/\d/g, '');
-
+    const clearValue = () => {
+      state.clear2 = '';
+    };
     return {
       state,
       change,
@@ -145,9 +140,8 @@ export default {
       focus,
       click,
       clickInput,
-      clickLeftIcon,
-      clickRightIcon,
-      formatter
+      formatter,
+      clearValue
     };
   }
 };

src/sites/mobile-taro/vue/src/pages/index/index.vue

@@ -35,10 +35,10 @@
 import { reactive, toRefs } from 'vue';
 import config from '../../../../../../config.json';
 import Taro from '@tarojs/taro';
-import { Right } from '@nutui/icons-vue-taro'
+import { Right } from '@nutui/icons-vue-taro';
 export default {
   name: 'NutUI',
-  components:{ Right },
+  components: { Right },
   onShareAppMessage() {
     return {
       title: '',