docs(form): add international en-us

src/packages/__VUE/form/demo.vue

@@ -1,134 +1,150 @@
 <template>
   <div class="demo full">
-    <h2>基本用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-form>
-      <nut-form-item label="姓名">
-        <input class="nut-input-text" placeholder="请输入姓名" type="text" />
+      <nut-form-item :label="translate('name')">
+        <input class="nut-input-text" :placeholder="translate('nameTip')" type="text" />
       </nut-form-item>
-      <nut-form-item label="年龄">
-        <input class="nut-input-text" placeholder="请输入年龄" type="text" />
+      <nut-form-item :label="translate('age')">
+        <input class="nut-input-text" :placeholder="translate('ageTip')" type="text" />
       </nut-form-item>
-      <nut-form-item label="联系电话">
-        <input class="nut-input-text" placeholder="请输入联系电话" type="text" />
+      <nut-form-item :label="translate('tel')">
+        <input class="nut-input-text" :placeholder="translate('telTip')" type="text" />
       </nut-form-item>
-      <nut-form-item label="地址">
-        <input class="nut-input-text" placeholder="请输入地址" type="text" />
+      <nut-form-item :label="translate('address')">
+        <input class="nut-input-text" :placeholder="translate('addressTip')" type="text" />
       </nut-form-item>
-      <nut-form-item label="备注">
-        <nut-textarea placeholder="请输入备注" type="text" />
+      <nut-form-item :label="translate('remarks')">
+        <nut-textarea :placeholder="translate('remarksTip')" type="text" />
       </nut-form-item>
     </nut-form>
-    <h2>动态表单</h2>
+    <h2>{{ translate('title1') }}</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-form-item
+        :label="translate('name')"
+        prop="name"
+        required
+        :rules="[{ required: true, message: translate('nameTip') }]"
+      >
+        <input
+          class="nut-input-text"
+          v-model="dynamicForm.state.name"
+          :placeholder="translate('nameTip')"
+          type="text"
+        />
       </nut-form-item>
       <nut-form-item
-        :label="'联系方式' + index"
+        :label="translate('tel') + index"
         :prop="'tels.' + index + '.value'"
         required
-        :rules="[{ required: true, message: '请填写联系方式' + index }]"
+        :rules="[{ required: true, message: translate('telTip') + 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" />
+        <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">添加</nut-button>
-        <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.remove">删除</nut-button>
-        <nut-button type="primary" style="margin-right: 10px" size="small" @click="dynamicForm.methods.submit"
-          >提交
+        <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add"
+          >{{ translate('add') }}
         </nut-button>
-        <nut-button size="small" @click="dynamicForm.methods.reset">重置提示状态</nut-button>
+        <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.remove"
+          >{{ translate('remove') }}
+        </nut-button>
+        <nut-button type="primary" style="margin-right: 10px" size="small" @click="dynamicForm.methods.submit">
+          {{ translate('submit') }}
+        </nut-button>
+        <nut-button size="small" @click="dynamicForm.methods.reset">{{ translate('reset') }}</nut-button>
       </nut-cell>
     </nut-form>
-    <h2>表单校验</h2>
+    <h2>{{ translate('title2') }}</h2>
     <nut-form :model-value="formData" ref="ruleForm">
-      <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
+      <nut-form-item
+        :label="translate('name')"
+        prop="name"
+        required
+        :rules="[{ required: true, message: translate('nameTip') }]"
+      >
         <input
           class="nut-input-text"
           @blur="customBlurValidate('name')"
           v-model="formData.name"
-          placeholder="请输入姓名，blur 事件校验"
+          :placeholder="translate('nameTip1')"
           type="text"
         />
       </nut-form-item>
       <nut-form-item
-        label="年龄"
+        :label="translate('age')"
         prop="age"
         required
         :rules="[
-          { required: true, message: '请填写年龄' },
-          { validator: customValidator, message: '必须输入数字' },
-          { regex: /^(\d{1,2}|1\d{2}|200)$/, message: '必须输入0-200区间' }
+          { required: true, message: translate('ageTip') },
+          { validator: customValidator, message: translate('ageTip2') },
+          { regex: /^(\d{1,2}|1\d{2}|200)$/, message: translate('ageTip3') }
         ]"
       >
-        <input
-          class="nut-input-text"
-          v-model="formData.age"
-          placeholder="请输入年龄，必须数字且0-200区间"
-          type="text"
-        />
+        <input class="nut-input-text" v-model="formData.age" :placeholder="translate('ageTip1')" type="text" />
       </nut-form-item>
       <nut-form-item
-        label="联系电话"
+        :label="translate('tel')"
         prop="tel"
         required
         :rules="[
-          { required: true, message: '请填写联系电话' },
-          { validator: asyncValidator, message: '电话格式不正确' }
+          { required: true, message: translate('telTip') },
+          { validator: asyncValidator, message: translate('telTip2') }
         ]"
       >
-        <input
-          class="nut-input-text"
-          v-model="formData.tel"
-          placeholder="请输入联系电话，异步校验电话格式"
-          type="text"
-        />
+        <input class="nut-input-text" v-model="formData.tel" :placeholder="translate('telTip1')" 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-form-item
+        :label="translate('address')"
+        prop="address"
+        required
+        :rules="[{ required: true, message: translate('addressTip') }]"
+      >
+        <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">提交</nut-button>
-        <nut-button size="small" @click="reset">重置提示状态</nut-button>
+        <nut-button type="primary" size="small" style="margin-right: 10px" @click="submit">
+          {{ translate('submit') }}
+        </nut-button>
+        <nut-button size="small" @click="reset"> {{ translate('reset') }}</nut-button>
       </nut-cell>
     </nut-form>
-    <h2>表单类型</h2>
+    <h2>{{ translate('title3') }}</h2>
     <nut-form>
-      <nut-form-item label="开关">
+      <nut-form-item :label="translate('switch')">
         <nut-switch v-model="formData2.switch"></nut-switch>
       </nut-form-item>
-      <nut-form-item label="复选框">
-        <nut-checkbox v-model="formData2.checkbox">复选框</nut-checkbox>
+      <nut-form-item :label="translate('checkbox')">
+        <nut-checkbox v-model="formData2.checkbox">{{ translate('checkbox') }}</nut-checkbox>
       </nut-form-item>
-      <nut-form-item label="单选按钮">
+      <nut-form-item :label="translate('radiogroup')">
         <nut-radiogroup direction="horizontal" v-model="formData2.radio">
-          <nut-radio label="1">选项1</nut-radio>
-          <nut-radio disabled label="2">选项2</nut-radio>
-          <nut-radio label="3">选项3</nut-radio>
+          <nut-radio label="1">{{ translate('option', 1) }}</nut-radio>
+          <nut-radio disabled label="2">{{ translate('option', 2) }}</nut-radio>
+          <nut-radio label="3">{{ translate('option', 3) }}</nut-radio>
         </nut-radiogroup>
       </nut-form-item>
-      <nut-form-item label="评分">
+      <nut-form-item :label="translate('rate')">
         <nut-rate v-model="formData2.rate" />
       </nut-form-item>
-      <nut-form-item label="步进器">
+      <nut-form-item :label="translate('inputnumber')">
         <nut-inputnumber v-model="formData2.number" />
       </nut-form-item>
-      <nut-form-item label="滑块">
+      <nut-form-item :label="translate('range')">
         <nut-range hidden-tag v-model="formData2.range"></nut-range>
       </nut-form-item>
-      <nut-form-item label="文件上传">
-        <nut-uploader url="http://服务地址" v-model:file-list="formData2.defaultFileList" maximum="3" multiple>
+      <nut-form-item :label="translate('uploader')">
+        <nut-uploader url="http://apiurl" v-model:file-list="formData2.defaultFileList" maximum="3" multiple>
         </nut-uploader>
       </nut-form-item>
-      <nut-form-item label="地址">
+      <nut-form-item :label="translate('address')">
         <input
           class="nut-input-text"
           v-model="formData2.address"
           @click="addressModule.methods.show"
           readonly
-          placeholder="请选择地址"
+          :placeholder="translate('addressTip1')"
           type="text"
         />
         <!-- nut-address -->
@@ -139,7 +155,7 @@
           :country="addressModule.state.country"
           :town="addressModule.state.town"
           @change="addressModule.methods.onChange"
-          custom-address-title="请选择所在地区"
+          :custom-address-title="translate('addressTip2')"
         ></nut-address>
       </nut-form-item>
     </nut-form>
@@ -150,7 +166,88 @@
 import { Toast } from '@/packages/nutui.vue';
 import { reactive, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('form');
+const { createDemo, translate } = createComponent('form');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    title1: '动态表单',
+    title2: '表单校验',
+    title3: '表单类型',
+    name: '姓名',
+    nameTip: '请输入姓名',
+    nameTip1: '请输入姓名，blur 事件校验',
+    age: '年龄',
+    ageTip: '请输入年龄',
+    ageTip1: '请输入年龄，必须数字且0-200区间',
+    ageTip2: '必须输入数字',
+    ageTip3: '必须输入0-200区间',
+    tel: '联系电话',
+    telTip: '请输入联系电话',
+    telTip1: '异步校验电话格式',
+    telTip2: '电话格式不正确',
+    address: '地址',
+    addressTip: '请输入地址',
+    addressTip1: '请选择地址',
+    addressTip2: '请选择所在地区',
+    remarks: '备注',
+    remarksTip: '请输入备注',
+    add: '添加',
+    remove: '删除',
+    submit: '提交',
+    reset: '重置提示状态',
+    switch: '开关',
+    checkbox: '复选框',
+    radiogroup: '单选按钮',
+    option: (v: string) => '选项' + v,
+    rate: '评分',
+    inputnumber: '步进器',
+    range: '滑块',
+    uploader: '文件上传',
+    success: '上传成功',
+    uploading: '上传中...',
+    asyncValidator: '模拟异步验证中'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    title1: 'Dynamic Form',
+    title2: 'Validate Form',
+    title3: 'Form Type',
+    name: 'Name',
+    nameTip: 'Please enter your name',
+    nameTip1: 'Please enter , blur event validate',
+    age: 'Age',
+    ageTip: 'Please enter age',
+    ageTip1: 'Please enter the age, which must be numeric and in the range of 0-200',
+    ageTip2: 'You must enter a number',
+    ageTip3: 'The range 0-200 must be entered',
+    tel: 'Tel',
+    telTip: 'Please enter tel',
+    telTip1: 'Async check tel format',
+    telTip2: 'Tel format is incorrect',
+    address: 'Address',
+    addressTip: 'Please enter address',
+    addressTip1: 'Please select an address',
+    addressTip2: 'Please select your region',
+    remarks: 'Remarks',
+    remarksTip: 'Please enter remarks',
+    add: 'Add',
+    remove: 'Remove',
+    submit: 'Submit',
+    reset: 'Reset prompt status',
+    switch: 'Switch',
+    checkbox: 'Checkbox',
+    radiogroup: 'Radiogroup',
+    option: (v: string) => 'Option' + v,
+    rate: 'Rate',
+    inputnumber: 'Inputnumber',
+    range: 'Range',
+    uploader: 'Upload file',
+    success: 'Upload successful',
+    uploading: 'Uploading',
+    asyncValidator: 'Simulating asynchronous verification'
+  }
+});
 export default createDemo({
   props: {},
   setup() {
@@ -211,17 +308,17 @@ export default createDemo({
       address: '',
       defaultFileList: [
         {
-          name: '文件1.png',
+          name: 'file 1.png',
           url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
           status: 'success',
-          message: '上传成功',
+          message: translate('success'),
           type: 'image'
         },
         {
-          name: '文件2.png',
+          name: 'file 2.png',
           url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
           status: 'uploading',
-          message: '上传中...',
+          message: translate('uploading'),
           type: 'image'
         }
       ]
@@ -295,7 +392,7 @@ export default createDemo({
     // Promise 异步校验
     const asyncValidator = (val: string) => {
       return new Promise((resolve) => {
-        Toast.loading('模拟异步验证中...');
+        Toast.loading(translate('asyncValidator'));
         setTimeout(() => {
           Toast.hide();
           resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
@@ -314,7 +411,8 @@ export default createDemo({
       formData2,
       addressModule,
       dynamicForm,
-      dynamicRefForm
+      dynamicRefForm,
+      translate
     };
   }
 });

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

@@ -0,0 +1,380 @@
+# Form
+
+### Intro
+
+It is used for data entry and verification. It supports input box, radio box, check box, file upload and other types. It needs to be used with cell components.
+
+### Install
+
+    
+``` javascript
+import { createApp } from 'vue';
+// vue
+import { Form,FormItem,Cell,CellGroup } from '@nutui/nutui';
+// taro
+import { Form,FormItem,Cell,CellGroup  } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Form);
+app.use(FormItem);
+app.use(Cell);
+app.use(CellGroup);
+```
+
+
+### Basic Usage
+
+:::demo
+
+```html
+<template>
+  <nut-form>
+      <nut-form-item label="Name">
+          <input 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-form-item>
+      <nut-form-item label="Tel">
+          <input 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-form-item>
+      <nut-form-item label="备注">
+          <nut-textarea  placeholder="请输入备注" type="text" />
+      </nut-form-item>
+  </nut-form>
+</template>
+```
+:::
+
+
+### Dynamic Form
+
+:::demo
+
+```html
+<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-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-form-item>
+    <nut-cell>
+      <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.add">Add</nut-button>
+      <nut-button size="small" style="margin-right: 10px" @click="dynamicForm.methods.remove">Remove</nut-button>
+      <nut-button type="primary" style="margin-right: 10px" size="small" @click="dynamicForm.methods.submit">Submit</nut-button>
+      <nut-button size="small" @click="dynamicForm.methods.reset">Reset prompt status</nut-button>
+    </nut-cell>
+  </nut-form>
+</template>
+<script lang="ts">
+import { ref,reactive } from 'vue';
+export default {
+  setup(){
+    const dynamicRefForm = ref<any>(null);
+    const dynamicForm = {
+      state: reactive({
+        name: '',
+        tels: new Array({
+          key: 1,
+          value: ''
+        })
+      }),
+
+      methods: {
+        submit() {
+          dynamicRefForm.value.validate().then(({ valid, errors }: any) => {
+            if (valid) {
+              console.log('success', dynamicForm);
+            } else {
+              console.log('error submit!!', errors);
+            }
+          });
+        },
+        reset() {
+          dynamicRefForm.value.reset();
+        },
+        remove() {
+          dynamicForm.state.tels.splice(dynamicForm.state.tels.length - 1, 1);
+        },
+        add() {
+          let newIndex = dynamicForm.state.tels.length;
+          dynamicForm.state.tels.push({
+            key: Date.now(),
+            value: ''
+          });
+        }
+      }
+    };
+    return {
+      dynamicForm,
+      dynamicRefForm
+    };
+  }
+}
+</script>
+```
+
+:::
+
+
+### Validate Form
+
+:::demo
+
+```html
+<template>
+<nut-form :model-value="formData" 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"
+      placeholder="Please enter , blur event validate" type="text" />
+  </nut-form-item>
+  <nut-form-item label="Age" prop="age" required :rules="[
+      { required: true, message: 'Please enter age' },
+      { validator: customValidator, message: 'You must enter a number' },
+      { 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-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-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-form-item>
+  <nut-cell>
+    <nut-button type="primary" size="small" style="margin-right: 10px" @click="submit">Submit</nut-button>
+    <nut-button size="small" @click="reset">Reset prompt status</nut-button>
+  </nut-cell>
+</nut-form>
+</template>
+<script lang="ts">
+import { ref,reactive } from 'vue';
+export default {
+setup(){
+    const formData = reactive({
+        name: '',
+        age: '',
+        tel: '',
+        address: ''
+    });
+    const validate = (item: any) => {
+        console.log(item);
+    };
+    const ruleForm = ref<any>(null);
+
+    const submit = () => {
+      ruleForm.value.validate().then(({ valid, errors }: any) => {
+        if (valid) {
+          console.log('success', formData);
+        } else {
+          console.log('error submit!!', errors);
+        }
+      });
+    };
+    const reset = () => {
+      ruleForm.value.reset();
+    };
+
+    const customBlurValidate = (prop: string) => {
+      ruleForm.value.validate(prop).then(({ valid, errors }: any) => {
+        if (valid) {
+          console.log('success', formData);
+        } else {
+          console.log('error submit!!', errors);
+        }
+      });
+    };
+
+    const customValidator = (val: string) => /^\d+$/.test(val);
+    // Promise async validator
+    const asyncValidator = (val: string) => {
+      return new Promise((resolve) => {
+        Toast.loading('Simulating asynchronous verification');
+        setTimeout(() => {
+          Toast.hide();
+          resolve(/^400(-?)[0-9]{7}$|^1\d{10}$|^0[0-9]{2,3}-[0-9]{7,8}$/.test(val));
+        }, 1000);
+      });
+    };
+    return { ruleForm, formData, validate, customValidator, asyncValidator, customBlurValidate, submit, reset };
+}
+}
+</script>
+```
+:::
+
+
+### Form Type
+
+:::demo
+
+```html
+<template>
+<nut-form>
+    <nut-form-item label="switch">
+        <nut-switch v-model="formData2.switch"></nut-switch>
+    </nut-form-item>
+    <nut-form-item label="checkbox">
+        <nut-checkbox v-model="formData2.checkbox">checkbox</nut-checkbox>
+    </nut-form-item>
+    <nut-form-item label="radio">
+        <nut-radiogroup direction="horizontal" v-model="formData2.radio">
+            <nut-radio label="1">Option 1</nut-radio>
+            <nut-radio disabled label="2">Option 2</nut-radio>
+            <nut-radio label="3">Option 3</nut-radio>
+        </nut-radiogroup>
+    </nut-form-item>
+    <nut-form-item label="Rate">
+        <nut-rate v-model="formData2.rate" />
+    </nut-form-item>
+    <nut-form-item label="Inputnumber">
+        <nut-inputnumber v-model="formData2.number" />
+    </nut-form-item>
+    <nut-form-item label="Range">
+        <nut-range hidden-tag v-model="formData2.range"></nut-range>
+    </nut-form-item>
+    <nut-form-item label="Upload file">
+        <nut-uploader url="http://apiurl" v-model:file-list="formData2.defaultFileList" maximum="3" multiple>
+        </nut-uploader>
+    </nut-form-item>
+    <nut-form-item label="Address">
+        <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"
+            :city="addressModule.state.city" :country="addressModule.state.country" :town="addressModule.state.town"
+            @change="addressModule.methods.onChange" custom-address-title="Please select your region"></nut-address>
+    </nut-form-item>
+</nut-form>
+</template>
+<script lang="ts">
+import { ref,reactive } from 'vue';
+export default {
+setup(){
+    const formData2 = reactive({
+      switch: false,
+      checkbox: false,
+      radio: 0,
+      number: 0,
+      rate: 3,
+      range: 30,
+      address: '',
+      defaultFileList: [
+        {
+          name: 'file 1.png',
+          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+          status: 'success',
+          message: 'Upload successful',
+          type: 'image'
+        },
+        {
+          name: 'file 2.png',
+          url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
+          status: 'uploading',
+          message: 'Uploading...',
+          type: 'image'
+        }
+      ]
+    });
+
+    const addressModule = reactive({
+      state: {
+        show: false,
+        province: [
+          { id: 1, name: 'Beijing' },
+          { id: 2, name: 'Guangxi' },
+          { id: 3, name: 'Jiangxi' },
+          { id: 4, name: 'Sichuan' }
+        ],
+        city: [
+          { id: 7, name: 'C1' },
+          { id: 8, name: 'C2' },
+          { id: 9, name: 'C3' },
+          { id: 6, name: 'C4' }
+        ],
+        country: [
+          { id: 3, name: 'D5' },
+          { id: 9, name: 'D6' },
+          { id: 4, name: 'D7' }
+        ],
+        town: []
+      },
+      methods: {
+        show() {
+          addressModule.state.show = !addressModule.state.show;
+          if (addressModule.state.show) {
+            formData2.address = '';
+          }
+        },
+        onChange({ custom, next, value }: any) {
+          formData2.address += value.name;
+          const name = addressModule.state[next];
+          if (name.length < 1) {
+            addressModule.state.show = false;
+          }
+        }
+      }
+    });
+    return { formData2, addressModule };
+}
+}
+</script>
+```
+:::
+
+
+### Form Props
+
+| Attribute   | Description                                              | Type   | Default |
+|-------------|----------------------------------------------------------|--------|---------|
+| model-value | Form data object (required when using form verification) | object |         |
+
+### Form Events
+
+| Event    | Description                                                | Arguments                                                                                                            |
+|----------|------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------|
+| validate | Triggered after any single table item fails to be verified | The `prop` value of the form item to be verified, whether the verification is passed, and the error message (if any) |
+
+### FormItem Props
+
+| Attribute           | Description                                                                                 | Type             | Default |
+|---------------------|---------------------------------------------------------------------------------------------|------------------|---------|
+| required            | Whether to display the red asterisk next to the label of the required field                 | boolean          | `false` |
+| prop                | The v-model field of the form field is required when the form verification function is used | string           | -       |
+| label-width         | The width of the form item label. The default unit is `px`                                  | number \| string | `90px`  |
+| label-align         | Form item label alignment. The optional values are `center` `right`                         | string           | `left`  |
+| body-align          | Input box alignment. The optional values are `center` `right`                               | string           | `left`  |
+| error-message-align | Error prompt text alignment. The optional values are `center` and `right`                   | string           | `left`  |
+| show-error-line     | Whether to mark the input box in red when the verification fails                            | boolean          | `true`  |
+| show-error-message  | Whether to display the error prompt under the input box when the verification fails         | boolean          | `true`  |
+
+### FormItem Rule data structure
+
+Use the `rules` attribute of FormItem to define verification rules. The optional attributes are as follows:
+
+| Attribute | Default                            | Type                                          |
+|-----------|------------------------------------|-----------------------------------------------|
+| required  | Is it a required field             | boolean                                       |
+| message   | Error prompt copy                  | string                                        |
+| validator | Verification by function           | (value, rule) => boolean \| string \| Promise |
+| regex     | Verification by regular expression | RegExp                                        |
+
+### Methods
+
+Use [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) to get Form instance and call instance methods.
+
+| Name              | Description                                                                                                       | Arguments                   | Return value |
+|-------------------|-------------------------------------------------------------------------------------------------------------------|-----------------------------|--------------|
+| submit            | Method of submitting form for verification                                                                        | -                           | Promise      |
+| reset             | Clear verification results                                                                                        | -                           | -            |
+| validate`v3.1.13` | Active trigger verification is used to trigger when the user customizes the scene, such as blur and change events | Same as FormItem prop value | -            |

src/packages/__VUE/form/doc.md

@@ -371,7 +371,7 @@ setup(){
 
 ### Methods
 
-通过 [ref](https://v3.cn.vuejs.org/api/special-attributes.html#ref) 可以获取到 Form 实例并调用实例方法
+通过 [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) 可以获取到 Form 实例并调用实例方法
 
 | 方法名            | 说明                                                               | 参数                | 返回值  |
 |-------------------|--------------------------------------------------------------------|---------------------|---------|

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

@@ -382,7 +382,7 @@ export default {
 
 ### Methods
 
-Use [ref](https://v3.cn.vuejs.org/api/special-attributes.html#ref) to get Uploader instance and call instance methods.
+Use [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) to get Uploader instance and call instance methods.
 
 | Name             | Description                                                                                 | Arguments | Return value |
 |------------------|---------------------------------------------------------------------------------------------|-----------|--------------|

src/packages/__VUE/uploader/doc.md

@@ -382,7 +382,7 @@ export default {
 
 ### Methods
 
-通过 [ref](https://v3.cn.vuejs.org/api/special-attributes.html#ref) 可以获取到 Uploader 实例并调用实例方法
+通过 [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) 可以获取到 Uploader 实例并调用实例方法
 
 | 方法名           | 说明                                                       | 参数 | 返回值 |
 |------------------|------------------------------------------------------------|------|--------|

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

@@ -220,7 +220,7 @@ setup() {
 
 ### Methods
 
-通过 [ref](https://v3.cn.vuejs.org/api/special-attributes.html#ref) 可以获取到 Uploader 实例并调用实例方法
+通过 [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) 可以获取到 Uploader 实例并调用实例方法
 
 | 方法名           | 说明                                                       | 参数 | 返回值 |
 |------------------|------------------------------------------------------------|------|--------|