fix: form demo与文档调整 (#1973)

* 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 修改

* fix: form demo修改，文档调整，input调整

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

@@ -3,16 +3,21 @@
     <h2>{{ translate('basic') }}</h2>
     <nut-form>
       <nut-form-item :label="translate('name')">
-        <input class="nut-input-text" :placeholder="translate('nameTip')" type="text" />
+        <nut-input v-model="basicData.name" class="nut-input-text" :placeholder="translate('nameTip')" type="text" />
       </nut-form-item>
       <nut-form-item :label="translate('age')">
-        <input class="nut-input-text" :placeholder="translate('ageTip')" type="text" />
+        <nut-input v-model="basicData.age" class="nut-input-text" :placeholder="translate('ageTip')" type="text" />
       </nut-form-item>
       <nut-form-item :label="translate('tel')">
-        <input class="nut-input-text" :placeholder="translate('telTip')" type="text" />
+        <nut-input v-model="basicData.tel" class="nut-input-text" :placeholder="translate('telTip')" type="text" />
       </nut-form-item>
       <nut-form-item :label="translate('address')">
-        <input class="nut-input-text" :placeholder="translate('addressTip')" type="text" />
+        <nut-input
+          v-model="basicData.address"
+          class="nut-input-text"
+          :placeholder="translate('addressTip')"
+          type="text"
+        />
       </nut-form-item>
       <nut-form-item :label="translate('remarks')">
         <nut-textarea :placeholder="translate('remarksTip')" type="text" />
@@ -41,7 +46,7 @@
         :key="item.key"
         v-for="(item, index) in dynamicForm.state.tels"
       >
-        <input class="nut-input-text" v-model="item.value" :placeholder="translate('telTip') + index" type="text" />
+        <nut-input class="nut-input-text" v-model="item.value" :placeholder="translate('telTip') + index" type="text" />
       </nut-form-item>
       <nut-cell>
         <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add"
@@ -94,7 +99,7 @@
           { regex: /^(\d{1,2}|1\d{2}|200)$/, message: translate('ageTip3') }
         ]"
       >
-        <input class="nut-input-text" v-model="formData.age" :placeholder="translate('ageTip1')" type="text" />
+        <nut-input class="nut-input-text" v-model="formData.age" :placeholder="translate('ageTip1')" type="text" />
       </nut-form-item>
       <nut-form-item
         :label="translate('tel')"
@@ -105,7 +110,7 @@
           { validator: asyncValidator, message: translate('telTip2') }
         ]"
       >
-        <input class="nut-input-text" v-model="formData.tel" :placeholder="translate('telTip1')" type="text" />
+        <nut-input class="nut-input-text" v-model="formData.tel" :placeholder="translate('telTip1')" type="text" />
       </nut-form-item>
       <nut-form-item
         :label="translate('address')"
@@ -113,7 +118,12 @@
         required
         :rules="[{ required: true, message: translate('addressTip') }]"
       >
-        <input class="nut-input-text" v-model="formData.address" :placeholder="translate('addressTip')" type="text" />
+        <nut-input
+          class="nut-input-text"
+          v-model="formData.address"
+          :placeholder="translate('addressTip')"
+          type="text"
+        />
       </nut-form-item>
       <nut-cell>
         <nut-button type="primary" size="small" style="margin-right: 10px" @click="submit">
@@ -157,7 +167,7 @@
         </nut-uploader>
       </nut-form-item>
       <nut-form-item :label="translate('address')">
-        <input
+        <nut-input
           class="nut-input-text"
           v-model="formData2.address"
           @click="addressModule.methods.show"
@@ -278,6 +288,12 @@ export default createDemo({
       tel: '',
       address: ''
     });
+    const basicData = reactive({
+      name: '',
+      age: '',
+      tel: '',
+      address: ''
+    });
 
     const dynamicRefForm = ref<any>(null);
     const dynamicForm = {
@@ -440,6 +456,7 @@ export default createDemo({
       addressModule,
       dynamicForm,
       dynamicRefForm,
+      basicData,
       translate
     };
   }

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

@@ -27,22 +27,37 @@ app.use(CellGroup);
 <template>
   <nut-form>
       <nut-form-item label="Name">
-          <input class="nut-input-text" placeholder="Please enter your name" type="text" />
+          <nut-input  v-model="basicData.name" class="nut-input-text" placeholder="Please enter your name" type="text" />
       </nut-form-item>
       <nut-form-item label="Age">
-          <input class="nut-input-text" placeholder="Please enter age" type="text" />
+          <nut-input v-model="basicData.age" class="nut-input-text" placeholder="Please enter age" type="text" />
       </nut-form-item>
       <nut-form-item label="Tel">
-          <input class="nut-input-text" placeholder="请输入联系电话" type="text" />
+          <nut-input v-model="basicData.tel" class="nut-input-text" placeholder="请输入联系电话" type="text" />
       </nut-form-item>
       <nut-form-item label="Address">
-          <input class="nut-input-text" placeholder="Please enter address" type="text" />
+          <nut-input v-model="basicData.address" class="nut-input-text" placeholder="Please enter address" type="text" />
       </nut-form-item>
       <nut-form-item label="备注">
           <nut-textarea  placeholder="请输入备注" type="text" />
       </nut-form-item>
   </nut-form>
 </template>
+<script lang="ts">
+import { ref,reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup(){
+    const basicData = reactive({
+      name: '',
+      age: '',
+      tel: '',
+      address: ''
+    });
+    return {basicData}
+  }
+}
+<script/>  
 ```
 :::
 
@@ -55,12 +70,12 @@ app.use(CellGroup);
 <template>
   <nut-form :model-value="dynamicForm.state" ref="dynamicRefForm">
     <nut-form-item label="Name" prop="name" required :rules="[{ required: true, message: 'Please enter your name' }]">
-      <input class="nut-input-text" v-model="dynamicForm.state.name" placeholder="Please enter your name" type="text" />
+      <nut-input class="nut-input-text" v-model="dynamicForm.state.name" placeholder="Please enter your name" type="text" />
     </nut-form-item>
     <nut-form-item :label="'Tel'+index" :prop="'tels.' + index + '.value'" required
       :rules="[{ required: true, message: 'Please enter tel'+index }]" :key="item.key"
       v-for="(item,index) in dynamicForm.state.tels">
-      <input class="nut-input-text" v-model="item.value" :placeholder="'Please enter tel'+index" type="text" />
+      <nut-input class="nut-input-text" v-model="item.value" :placeholder="'Please enter tel'+index" type="text" />
     </nut-form-item>
     <nut-cell>
       <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add">Add</nut-button>
@@ -134,7 +149,7 @@ export default {
             validator: nameLengthValidator
           }]}" ref="ruleForm">
   <nut-form-item label="Name" prop="name" required :rules="[{ required: true, message: 'Please enter your name' }]">
-    <input class="nut-input-text" @blur="customBlurValidate('name')" v-model="formData.name"
+    <nut-input class="nut-input-text" @blur="customBlurValidate('name')" v-model="formData.name"
       placeholder="Please enter , blur event validate" type="text" />
   </nut-form-item>
   <nut-form-item label="Age" prop="age" required :rules="[
@@ -143,16 +158,16 @@ export default {
       { validator: customRulePropValidator, message: 'You must enter a number', reg: /^\d+$/ },
       { regex: /^(\d{1,2}|1\d{2}|200)$/, message: 'The range 0-200 must be entered' }
     ]">
-    <input class="nut-input-text" v-model="formData.age" placeholder="Please enter the age, which must be numeric and in the range of 0-200" type="text" />
+    <nut-input class="nut-input-text" v-model="formData.age" placeholder="Please enter the age, which must be numeric and in the range of 0-200" type="text" />
   </nut-form-item>
   <nut-form-item label="Tel" prop="tel" required :rules="[
       { required: true, message: 'Please enter tel' },
       { validator: asyncValidator, message: 'Tel format is incorrect' }
     ]">
-    <input class="nut-input-text" v-model="formData.tel" placeholder="Async check tel format" type="text" />
+    <nut-input class="nut-input-text" v-model="formData.tel" placeholder="Async check tel format" type="text" />
   </nut-form-item>
   <nut-form-item label="Address" prop="address" required :rules="[{ required: true, message: 'Please enter address' }]">
-    <input class="nut-input-text" v-model="formData.address" placeholder="Please enter address" type="text" />
+    <nut-input class="nut-input-text" v-model="formData.address" placeholder="Please enter address" type="text" />
   </nut-form-item>
   <nut-cell>
     <nut-button type="primary" size="small" style="margin-right: 10px" @click="submit">Submit</nut-button>
@@ -256,7 +271,7 @@ setup(){
         </nut-uploader>
     </nut-form-item>
     <nut-form-item label="Address">
-        <input class="nut-input-text" v-model="formData2.address" @click="addressModule.methods.show" readonly
+        <nut-input class="nut-input-text" v-model="formData2.address" @click="addressModule.methods.show" readonly
             placeholder="Please select an address" type="text" />
         <!-- nut-address -->
         <nut-address v-model:visible="addressModule.state.show" :province="addressModule.state.province"

src/packages/__VUE/form/doc.md

@@ -27,22 +27,37 @@ app.use(CellGroup);
 <template>
   <nut-form>
       <nut-form-item label="姓名">
-          <input class="nut-input-text" placeholder="请输入姓名" type="text" />
+          <nut-input v-model="basicData.name"  class="nut-input-text" placeholder="请输入姓名" type="text" />
       </nut-form-item>
       <nut-form-item label="年龄">
-          <input class="nut-input-text" placeholder="请输入年龄" type="text" />
+          <nut-input v-model="basicData.age"  class="nut-input-text" placeholder="请输入年龄" type="text" />
       </nut-form-item>
       <nut-form-item label="联系电话">
-          <input class="nut-input-text" placeholder="请输入联系电话" type="text" />
+          <nut-input v-model="basicData.tel"  class="nut-input-text" placeholder="请输入联系电话" type="text" />
       </nut-form-item>
-      <nut-form-item label="地址">
-          <input class="nut-input-text" placeholder="请输入地址" type="text" />
+      <nut-form-item v-model="basicData.address"  label="地址">
+          <nut-input class="nut-input-text" placeholder="请输入地址" type="text" />
       </nut-form-item>
       <nut-form-item label="备注">
           <nut-textarea  placeholder="请输入备注" type="text" />
       </nut-form-item>
   </nut-form>
 </template>
+<script lang="ts">
+import { ref,reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup(){
+    const basicData = reactive({
+      name: '',
+      age: '',
+      tel: '',
+      address: ''
+    });
+    return {basicData}
+  }
+}
+<script/>  
 ```
 :::
 
@@ -55,12 +70,12 @@ app.use(CellGroup);
 <template>
   <nut-form :model-value="dynamicForm.state" ref="dynamicRefForm">
     <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
-      <input class="nut-input-text" v-model="dynamicForm.state.name" placeholder="请输入姓名" type="text" />
+      <nut-input class="nut-input-text" v-model="dynamicForm.state.name" placeholder="请输入姓名" type="text" />
     </nut-form-item>
     <nut-form-item :label="'联系方式'+index" :prop="'tels.' + index + '.value'" required
       :rules="[{ required: true, message: '请填写联系方式'+index }]" :key="item.key"
       v-for="(item,index) in dynamicForm.state.tels">
-      <input class="nut-input-text" v-model="item.value" :placeholder="'请输入联系方式'+index" type="text" />
+      <nut-input class="nut-input-text" v-model="item.value" :placeholder="'请输入联系方式'+index" type="text" />
     </nut-form-item>
     <nut-cell>
       <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add">添加</nut-button>
@@ -134,7 +149,7 @@ export default {
             validator: nameLengthValidator
           }]}" ref="ruleForm">
   <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
-    <input class="nut-input-text" @blur="customBlurValidate('name')" v-model="formData.name"
+    <nut-input class="nut-input-text" @blur="customBlurValidate('name')" v-model="formData.name"
       placeholder="请输入姓名，blur 事件校验" type="text" />
   </nut-form-item>
   <nut-form-item label="年龄" prop="age" required :rules="[
@@ -143,16 +158,16 @@ export default {
       { validator: customRulePropValidator, message: '必须输入数字', reg: /^\d+$/ },
       { regex: /^(\d{1,2}|1\d{2}|200)$/, message: '必须输入0-200区间' }
     ]">
-    <input class="nut-input-text" v-model="formData.age" placeholder="请输入年龄，必须数字且0-200区间" type="text" />
+    <nut-input class="nut-input-text" v-model="formData.age" placeholder="请输入年龄，必须数字且0-200区间" type="text" />
   </nut-form-item>
   <nut-form-item label="联系电话" prop="tel" required :rules="[
       { required: true, message: '请填写联系电话' },
       { validator: asyncValidator, message: '电话格式不正确' }
     ]">
-    <input class="nut-input-text" v-model="formData.tel" placeholder="请输入联系电话，异步校验电话格式" type="text" />
+    <nut-input class="nut-input-text" v-model="formData.tel" placeholder="请输入联系电话，异步校验电话格式" type="text" />
   </nut-form-item>
   <nut-form-item label="地址" prop="address" required :rules="[{ required: true, message: '请填写地址' }]">
-    <input class="nut-input-text" v-model="formData.address" placeholder="请输入地址" type="text" />
+    <nut-input class="nut-input-text" v-model="formData.address" placeholder="请输入地址" type="text" />
   </nut-form-item>
   <nut-cell>
     <nut-button type="primary" size="small" style="margin-right: 10px" @click="submit">提交</nut-button>
@@ -256,7 +271,7 @@ setup(){
         </nut-uploader>
     </nut-form-item>
     <nut-form-item label="地址">
-        <input class="nut-input-text" v-model="formData2.address" @click="addressModule.methods.show" readonly
+        <nut-input class="nut-input-text" v-model="formData2.address" @click="addressModule.methods.show" readonly
             placeholder="请选择地址" type="text" />
         <!-- nut-address -->
         <nut-address v-model:visible="addressModule.state.show" :province="addressModule.state.province"

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

@@ -27,22 +27,37 @@ app.use(CellGroup);
 <template>
   <nut-form>
       <nut-form-item label="姓名">
-          <input class="nut-input-text" placeholder="请输入姓名" type="text" />
+          <nut-input v-model="basicData.name"  class="nut-input-text" placeholder="请输入姓名" type="text" />
       </nut-form-item>
       <nut-form-item label="年龄">
-          <input class="nut-input-text" placeholder="请输入年龄" type="text" />
+          <nut-input v-model="basicData.age"  class="nut-input-text" placeholder="请输入年龄" type="text" />
       </nut-form-item>
       <nut-form-item label="联系电话">
-          <input class="nut-input-text" placeholder="请输入联系电话" type="text" />
+          <nut-input v-model="basicData.tel"  class="nut-input-text" placeholder="请输入联系电话" type="text" />
       </nut-form-item>
-      <nut-form-item label="地址">
-          <input class="nut-input-text" placeholder="请输入地址" type="text" />
+      <nut-form-item v-model="basicData.address"  label="地址">
+          <nut-input class="nut-input-text" placeholder="请输入地址" type="text" />
       </nut-form-item>
       <nut-form-item label="备注">
           <nut-textarea  placeholder="请输入备注" type="text" />
       </nut-form-item>
   </nut-form>
 </template>
+<script lang="ts">
+import { ref,reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup(){
+    const basicData = reactive({
+      name: '',
+      age: '',
+      tel: '',
+      address: ''
+    });
+    return {basicData}
+  }
+}
+<script/>  
 ```
 :::
 
@@ -55,12 +70,12 @@ app.use(CellGroup);
 <template>
   <nut-form :model-value="dynamicForm.state" ref="dynamicRefForm">
     <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
-      <input class="nut-input-text" v-model="dynamicForm.state.name" placeholder="请输入姓名" type="text" />
+      <nut-input class="nut-input-text" v-model="dynamicForm.state.name" placeholder="请输入姓名" type="text" />
     </nut-form-item>
     <nut-form-item :label="'联系方式'+index" :prop="'tels.' + index + '.value'" required
       :rules="[{ required: true, message: '请填写联系方式'+index }]" :key="item.key"
       v-for="(item,index) in dynamicForm.state.tels">
-      <input class="nut-input-text" v-model="item.value" :placeholder="'请输入联系方式'+index" type="text" />
+      <nut-input class="nut-input-text" v-model="item.value" :placeholder="'请输入联系方式'+index" type="text" />
     </nut-form-item>
     <nut-cell>
       <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add">添加</nut-button>
@@ -134,7 +149,7 @@ export default {
             validator: nameLengthValidator
           }]}" ref="ruleForm">
   <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
-    <input class="nut-input-text" @blur="customBlurValidate('name')" v-model="formData.name"
+    <nut-input class="nut-input-text" @blur="customBlurValidate('name')" v-model="formData.name"
       placeholder="请输入姓名，blur 事件校验" type="text" />
   </nut-form-item>
   <nut-form-item label="年龄" prop="age" required :rules="[
@@ -143,16 +158,16 @@ export default {
       { validator: customRulePropValidator, message: '必须输入数字', reg: /^\d+$/ },
       { regex: /^(\d{1,2}|1\d{2}|200)$/, message: '必须输入0-200区间' }
     ]">
-    <input class="nut-input-text" v-model="formData.age" placeholder="请输入年龄，必须数字且0-200区间" type="text" />
+    <nut-input class="nut-input-text" v-model="formData.age" placeholder="请输入年龄，必须数字且0-200区间" type="text" />
   </nut-form-item>
   <nut-form-item label="联系电话" prop="tel" required :rules="[
       { required: true, message: '请填写联系电话' },
       { validator: asyncValidator, message: '电话格式不正确' }
     ]">
-    <input class="nut-input-text" v-model="formData.tel" placeholder="请输入联系电话，异步校验电话格式" type="text" />
+    <nut-input class="nut-input-text" v-model="formData.tel" placeholder="请输入联系电话，异步校验电话格式" type="text" />
   </nut-form-item>
   <nut-form-item label="地址" prop="address" required :rules="[{ required: true, message: '请填写地址' }]">
-    <input class="nut-input-text" v-model="formData.address" placeholder="请输入地址" type="text" />
+    <nut-input class="nut-input-text" v-model="formData.address" placeholder="请输入地址" type="text" />
   </nut-form-item>
   <nut-cell>
     <nut-button type="primary" size="small" style="margin-right: 10px" @click="submit">提交</nut-button>
@@ -256,7 +271,7 @@ setup(){
         </nut-uploader>
     </nut-form-item>
     <nut-form-item label="地址">
-        <input class="nut-input-text" v-model="formData2.address" @click="addressModule.methods.show" readonly
+        <nut-input class="nut-input-text" v-model="formData2.address" @click="addressModule.methods.show" readonly
             placeholder="请选择地址" type="text" />
         <!-- nut-address -->
         <nut-address v-model:visible="addressModule.state.show" :province="addressModule.state.province"

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

@@ -286,20 +286,16 @@ export default create({
     watch(
       () => props.modelValue,
       () => {
-        if (!slots.input) {
-          updateValue(getModelValue());
-          resetValidation();
-        }
+        updateValue(getModelValue());
+        resetValidation();
       }
     );
 
     onMounted(() => {
-      if (!slots.input) {
-        if (props.autofocus) {
-          inputRef.value.focus();
-        }
-        updateValue(getModelValue(), props.formatTrigger);
+      if (props.autofocus) {
+        inputRef.value.focus();
       }
+      updateValue(getModelValue(), props.formatTrigger);
     });
 
     return {

src/packages/__VUE/input/index.vue

@@ -275,17 +275,13 @@ export default create({
     watch(
       () => props.modelValue,
       () => {
-        if (!slots.input) {
-          updateValue(getModelValue());
-          resetValidation();
-        }
+        updateValue(getModelValue());
+        resetValidation();
       }
     );
 
     onMounted(() => {
-      if (!slots.input) {
-        updateValue(getModelValue(), props.formatTrigger);
-      }
+      updateValue(getModelValue(), props.formatTrigger);
     });
 
     return {

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

@@ -3,16 +3,16 @@
     <h2>基本用法</h2>
     <nut-form>
       <nut-form-item label="姓名">
-        <input class="nut-input-text" placeholder="请输入姓名" type="text" />
+        <nut-input v-model="basicData.name" class="nut-input-text" placeholder="请输入姓名" type="text" />
       </nut-form-item>
       <nut-form-item label="年龄">
-        <input class="nut-input-text" placeholder="请输入年龄" type="text" />
+        <nut-input v-model="basicData.age" class="nut-input-text" placeholder="请输入年龄" type="text" />
       </nut-form-item>
       <nut-form-item label="联系电话">
-        <input class="nut-input-text" placeholder="请输入联系电话" type="text" />
+        <nut-input v-model="basicData.tel" class="nut-input-text" placeholder="请输入联系电话" type="text" />
       </nut-form-item>
       <nut-form-item label="地址">
-        <input class="nut-input-text" placeholder="请输入地址" type="text" />
+        <nut-input v-model="basicData.address" class="nut-input-text" placeholder="请输入地址" type="text" />
       </nut-form-item>
       <nut-form-item label="备注">
         <nut-textarea placeholder="请输入备注" type="text" />
@@ -21,7 +21,7 @@
     <h2>动态表单</h2>
     <nut-form :model-value="dynamicForm.state" ref="dynamicRefForm">
       <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
-        <input class="nut-input-text" v-model="dynamicForm.state.name" placeholder="请输入姓名" type="text" />
+        <nut-input class="nut-input-text" v-model="dynamicForm.state.name" placeholder="请输入姓名" type="text" />
       </nut-form-item>
       <nut-form-item
         :label="'联系方式' + index"
@@ -31,7 +31,7 @@
         :key="item.key"
         v-for="(item, index) in dynamicForm.state.tels"
       >
-        <input class="nut-input-text" v-model="item.value" :placeholder="'请输入联系方式' + index" type="text" />
+        <nut-input class="nut-input-text" v-model="item.value" :placeholder="'请输入联系方式' + index" type="text" />
       </nut-form-item>
       <nut-cell>
         <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add">添加</nut-button>
@@ -56,7 +56,7 @@
       ref="ruleForm"
     >
       <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
-        <input
+        <nut-input
           class="nut-input-text"
           @blur="customBlurValidate('name')"
           v-model="formData.name"
@@ -75,7 +75,7 @@
           { regex: /^(\d{1,2}|1\d{2}|200)$/, message: '必须输入0-200区间' }
         ]"
       >
-        <input
+        <nut-input
           class="nut-input-text"
           v-model="formData.age"
           placeholder="请输入年龄，必须数字且0-200区间"
@@ -91,7 +91,7 @@
           { validator: asyncValidator, message: '电话格式不正确' }
         ]"
       >
-        <input
+        <nut-input
           class="nut-input-text"
           v-model="formData.tel"
           placeholder="请输入联系电话，异步校验电话格式"
@@ -99,7 +99,7 @@
         />
       </nut-form-item>
       <nut-form-item label="地址" prop="address" required :rules="[{ required: true, message: '请填写地址' }]">
-        <input class="nut-input-text" v-model="formData.address" placeholder="请输入地址" type="text" />
+        <nut-input class="nut-input-text" v-model="formData.address" placeholder="请输入地址" type="text" />
       </nut-form-item>
       <nut-cell>
         <nut-button type="primary" size="small" style="margin-right: 10px" @click="submit">提交</nut-button>
@@ -141,7 +141,7 @@
         </nut-uploader>
       </nut-form-item>
       <nut-form-item label="地址">
-        <input
+        <nut-input
           class="nut-input-text"
           v-model="formData2.address"
           @click="addressModule.methods.show"
@@ -176,7 +176,12 @@ export default {
       tel: '',
       address: ''
     });
-
+    const basicData = reactive({
+      name: '',
+      age: '',
+      tel: '',
+      address: ''
+    });
     const dynamicRefForm = ref<any>(null);
     const dynamicForm = {
       state: reactive({
@@ -336,6 +341,7 @@ export default {
       formData2,
       addressModule,
       dynamicForm,
+      basicData,
       dynamicRefForm
     };
   }