docs: add international en-us

src/packages/__VUE/actionsheet/demo.vue

@@ -1,29 +1,39 @@
 <template>
   <div class="demo">
-    <h2>基本用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible1')">
-      <span><label>基础用法</label></span>
+      <span
+        ><label>{{ translate('basic') }}</label></span
+      >
       <div class="selected-option" v-html="state.val1"></div>
     </nut-cell>
     <nut-cell :showIcon="true" :isLink="true" @click="switchActionSheet('isVisible2')">
-      <span><label>展示取消按钮</label></span>
+      <span
+        ><label>{{ translate('showCancelButton') }}</label></span
+      >
       <div class="selected-option" v-html="state.val2"></div>
     </nut-cell>
     <nut-cell :isLink="true" @click="switchActionSheet('isVisible3')">
-      <span><label>展示描述信息</label></span>
+      <span
+        ><label>{{ translate('showDescription') }}</label></span
+      >
       <div class="selected-option" v-html="state.val3"></div>
     </nut-cell>
-    <h2>选项状态</h2>
+    <h2>{{ translate('optionStatus') }}</h2>
 
     <nut-cell :isLink="true" @click="switchActionSheet('isVisible4')">
-      <span><label>选项状态</label></span>
+      <span
+        ><label>{{ translate('optionStatus') }}</label></span
+      >
       <div class="selected-option" v-html="state.val4"></div>
     </nut-cell>
 
-    <h2>自定义</h2>
+    <h2>{{ translate('customContent') }}</h2>
 
     <nut-cell :isLink="true" @click="switchActionSheet('isVisible5')">
-      <span><label>自定义内容</label></span>
+      <span
+        ><label>{{ translate('customContent') }}</label></span
+      >
       <div class="selected-option"></div>
     </nut-cell>
 
@@ -38,7 +48,7 @@
     <!-- demo(带取消按钮） -->
     <nut-actionsheet
       v-model:visible="state.isVisible2"
-      cancel-txt="取消"
+      :cancel-txt="translate('cancelTxt')"
       :menu-items="menuItemsOne"
       @choose="chooseItemTwo"
     >
@@ -46,30 +56,69 @@
     <!-- 展示描述信息 -->
     <nut-actionsheet
       v-model:visible="state.isVisible3"
-      title="标题"
-      :description="state.desc"
+      :title="translate('title')"
+      :description="desc"
       :menu-items="menuItemsTwo"
       @choose="chooseItemThree"
-      cancel-txt="取消"
+      :cancel-txt="translate('cancelTxt')"
     >
     </nut-actionsheet>
     <!-- demo 选项状态-->
     <nut-actionsheet
       v-model:visible="state.isVisible4"
-      cancel-txt="取消"
+      :cancel-txt="translate('cancelTxt')"
       :menu-items="menuItemsThree"
       @choose="chooseItemFour"
-      :choose-tag-value="state.chooseTagValue"
+      :choose-tag-value="chooseTagValue"
     ></nut-actionsheet>
     <!-- 自定义面板-->
-    <nut-actionsheet v-model:visible="state.isVisible5" title="标题">
-      <div class="custom-content">自定义内容</div>
+    <nut-actionsheet v-model:visible="state.isVisible5" :title="translate('title')">
+      <div class="custom-content">{{ translate('customContent') }}</div>
     </nut-actionsheet>
   </div>
 </template>
 
 <script lang="ts">
-import { reactive } from 'vue';
+import { computed, reactive } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+const { createDemo, translate } = createComponent('tabbar');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    showCancelButton: '展示取消按钮',
+    showDescription: '展示描述信息',
+    optionStatus: '选项状态',
+    customContent: '自定义内容',
+    cancelTxt: '取消',
+    title: '标题',
+    optionOne: '选项一',
+    optionTwo: '选项二',
+    optionThree: '选项三',
+    showDesc: '这是一段描述信息',
+    checkOption: '选中选项',
+    desc: '描述信息',
+    disableOption: '禁用选项',
+    loadOptions: '加载选项'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    showCancelButton: 'Show Cancel Button',
+    showDescription: 'Show Description',
+    optionStatus: 'Option Status',
+    customContent: 'Custom Content',
+    cancelTxt: 'cancle',
+    title: 'title',
+    optionOne: 'option one',
+    optionTwo: 'option two',
+    optionThree: 'option three',
+    showDesc: 'This is a description',
+    checkOption: 'Check option',
+    desc: 'Description',
+    disableOption: 'Disable option',
+    loadOptions: 'Load options'
+  }
+});
 interface Item {
   name: string;
   subname?: string;
@@ -77,7 +126,7 @@ interface Item {
   disable?: boolean;
   loading?: boolean;
 }
-export default {
+export default createDemo({
   props: {},
   setup() {
     const state = reactive({
@@ -89,53 +138,52 @@ export default {
       val1: '',
       val2: '',
       val3: '',
-      val4: '',
-      desc: '这是一段描述信息',
-      chooseTagValue: '选中选项'
+      val4: ''
     });
-    const menuItemsOne: Item[] = [
+    const chooseTagValue = computed(() => translate('checkOption'));
+    const desc = computed(() => translate('showDesc'));
+    const menuItemsOne = computed(() => [
       {
-        name: '选项一'
+        name: translate('optionOne')
       },
       {
-        name: '选项二'
+        name: translate('optionTwo')
       },
       {
-        name: '选项三'
+        name: translate('optionThree')
       }
-    ];
-    const menuItemsTwo: Item[] = [
+    ]);
+    const menuItemsTwo = computed(() => [
       {
-        name: '选项一'
+        name: translate('optionOne')
       },
       {
-        name: '选项二'
+        name: translate('optionTwo')
       },
       {
-        name: '选项三',
+        name: translate('optionThree'),
         color: 'red',
-        subname: '描述信息'
+        subname: translate('desc')
       }
-    ];
-    const menuItemsThree: Item[] = [
+    ]);
+    const menuItemsThree = computed(() => [
       {
-        name: '选中选项'
+        name: translate('checkOption')
       },
       {
-        name: '禁用选项',
+        name: translate('disableOption'),
         disable: true
       },
       {
-        name: '加载选项',
+        name: translate('loadOptions'),
         loading: true
       }
-    ];
+    ]);
     const switchActionSheet = (param: 'isVisible1' | 'isVisible2' | 'isVisible3' | 'isVisible4') => {
       state[param] = !state[param];
     };
 
     const chooseItem = (itemParams: any) => {
-      console.log(itemParams, 'itemParams');
       state.val1 = itemParams.name;
     };
 
@@ -154,6 +202,9 @@ export default {
       menuItemsOne,
       menuItemsTwo,
       menuItemsThree,
+      chooseTagValue,
+      desc,
+      translate,
       chooseItem,
       chooseItemTwo,
       chooseItemThree,
@@ -161,7 +212,7 @@ export default {
       switchActionSheet
     };
   }
-};
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,293 @@
+# ActionSheet
+
+### Intro
+Action menu panel that pops up from the bottom.
+
+### Install
+
+``` javascript
+import { createApp } from 'vue';
+// vue
+import { ActionSheet, Popup } from '@nutui/nutui';
+// taro
+import { ActionSheet, Popup } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(ActionSheet).use(Popup);
+```
+
+## Basic Usage
+
+:::demo
+``` html
+<template>
+  <div>
+  <nut-cell
+      :show-icon="true"
+      :isLink="true"
+      @click="switchActionSheet('isVisible')"
+     
+    >
+      <span><label>Basic Usage</label></span>
+      <div v-html="state.val"></div>
+    </nut-cell>
+     <!-- demo Basic Usage -->
+    <nut-actionsheet
+      v-model:visible="state.isVisible"
+      :menu-items="menuItems"
+      @choose="chooseItem"
+    >
+    </nut-actionsheet>
+    </div>
+</template>
+<script>
+import { reactive } from 'vue';
+export default {
+  setup() {
+  const state = reactive({
+      isVisible: false,
+      val: '',
+    });
+     const menuItems = [
+      {
+        name: 'option one'
+      },
+      {
+        name: 'option two'
+      },
+      {
+        name: 'option three'
+      }
+    ];
+    const switchActionSheet = ( param ) => {
+      state.isVisible = !state.isVisible;
+    };
+      const chooseItem = (itemParams) => {
+      state.val = itemParams.name;
+    };
+    return {
+      state,
+      switchActionSheet,
+      menuItems,
+      chooseItem,
+    };
+  }
+}
+ </script>
+```
+:::
+
+## Show Cancel Button
+:::demo
+``` html
+<template>
+  <div>
+  <nut-cell
+      :show-icon="true"
+      :isLink="true"
+      @click="switchActionSheet('isVisible')"
+    >
+      <span><label>Show Cancel Button</label></span>
+      <div v-html="state.val"></div>
+    </nut-cell>
+     <!-- demo Show Cancel Button -->
+    <nut-actionsheet
+      v-model:visible="state.isVisible"
+      :menu-items="menuItems"
+      cancel-txt="cancel"
+      @choose="chooseItem"
+    >
+    </nut-actionsheet>
+    </div>
+</template>
+<script>
+import { reactive } from 'vue';
+export default {
+  setup() {
+  const state = reactive({
+      isVisible: false,
+      val: '',
+    });
+     const menuItems = [
+       {
+        name: 'option one'
+      },
+      {
+        name: 'option two'
+      },
+      {
+        name: 'option three'
+      }
+    ];
+    const switchActionSheet = ( param ) => {
+      state.isVisible = !state.isVisible;
+    };
+      const chooseItem = (itemParams) => {
+      state.val = itemParams.name;
+    };
+    return {
+      state,
+      switchActionSheet,
+      menuItems,
+      chooseItem,
+    };
+  }
+}
+ </script>
+```
+:::
+## Show Description
+:::demo
+``` html
+<template>
+  <div>
+  <nut-cell
+      :show-icon="true"
+      :isLink="true"
+      @click="switchActionSheet('isVisible')"
+    >
+      <span><label>Show Description</label></span>
+      <div v-html="state.val"></div>
+    </nut-cell>
+     <!-- demo Show Description -->
+    <nut-actionsheet
+      v-model:visible="state.isVisible"
+      cancel-txt="cancel"
+      description="This is a presentation"
+      :menu-items="menuItems"
+      @choose="chooseItem"
+    >
+    </nut-actionsheet>
+    </div>
+</template>
+<script>
+import { reactive } from 'vue';
+export default {
+  setup() {
+  const state = reactive({
+      isVisible: false,
+      val: '',
+    });
+     const menuItems = [
+          {
+        name: 'option one'
+      },
+      {
+        name: 'option two'
+      },
+      {
+        name: 'option three',
+        subname: 'Description'
+      }
+    ];
+    const switchActionSheet = ( param ) => {
+      state.isVisible = !state.isVisible;
+    };
+      const chooseItem = (itemParams) => {
+      state.val = itemParams.name;
+    };
+    return {
+      state,
+      switchActionSheet,
+      menuItems,
+      chooseItem,
+    };
+  }
+}
+ </script>
+```
+:::
+
+## Option Status
+
+:::demo
+``` html
+<template>
+  <div>
+  <nut-cell
+      :show-icon="true"
+      :isLink="true"
+      @click="switchActionSheet('isVisible')"
+     
+    >
+      <span><label>Option Status</label></span>
+      <div v-html="state.val"></div>
+    </nut-cell>
+     <!-- demo Option Status -->
+    <nut-actionsheet
+      v-model:visible="state.isVisible"
+      :menu-items="menuItems"
+      choose-tag-value="Shading Options"
+      @choose="chooseItem"
+       cancel-txt="cancel"
+    >
+    </nut-actionsheet>
+    </div>
+</template>
+<script>
+import { reactive } from 'vue';
+export default {
+  setup() {
+  const state = reactive({
+      isVisible: false,
+      val: '',
+    });
+     const menuItems = [
+      {
+        name: 'Shading Options'
+      },
+      {
+        name: 'Disable option',
+        disable: true
+      }
+    ];
+    const switchActionSheet = ( param ) => {
+      state.isVisible = !state.isVisible;
+    };
+      const chooseItem = (itemParams) => {
+      state.val = itemParams.name;
+    };
+    return {
+      state,
+      switchActionSheet,
+      menuItems,
+      chooseItem,
+    };
+  }
+}
+ </script>
+```
+:::
+
+## Prop
+
+| Attribute            | Description               | Type   | Default  |
+|------------------|----------------------------------------|---------|-----------|
+| v-model:visible       | Whether to show ActionSheet	                             | Boolean | false|
+| menu-items       | Options                                 | Array   | [ ]       |
+| option-tag       | Custom Options tag key                 | String  | 'name'    |
+| option-sub-tag   | Custom Options subtag key                 | String  | 'subname' |
+| choose-tag-value | Set the value of the selected item | String  | ''        |
+| color            | selected item color，when choose-tag-value == option-tag   | String  | '#ee0a24' |
+| title            | set list item title                         | String  | ''        |
+| description      | set list item description                | String  | ''        |
+| cancel-txt       | Text of cancel button                               | String  | '取消'   |
+| close-abled      | Whether the mask layer can be closed                       | Boolean | true      |
+
+## menu-items
+
+| Attribute            | Description               | Type   |
+|--------|--------------------|-----------------------------------|
+| name | Title      | String    |
+| subname | Subtitle | String          |
+| color | Text color（Check Item Color Hierarchy > Option Font Color） | String          |
+| loading | Whether to be loading status | Boolean          |
+| disable | Whether to be disabled | Boolean       |
+
+## Event
+
+| Event | Description                  | Arguments    |
+|--------|--------------------|-----------------------------------|
+| choose | Triggered after selection       | item, index |
+| cancel | Triggered when cancel copy is clicked | -                              |
+| close | Triggered when the mask layer is clicked | event: Event                              |

src/packages/__VUE/actionsheet/doc.md

@@ -88,10 +88,10 @@ export default {
       :isLink="true"
       @click="switchActionSheet('isVisible')"
     >
-      <span><label>基础用法</label></span>
+      <span><label>展示取消按钮</label></span>
       <div v-html="state.val"></div>
     </nut-cell>
-     <!-- demo 基础用法 -->
+     <!-- demo 展示取消按钮 -->
     <nut-actionsheet
       v-model:visible="state.isVisible"
       :menu-items="menuItems"
@@ -147,10 +147,10 @@ export default {
       :isLink="true"
       @click="switchActionSheet('isVisible')"
     >
-      <span><label>基础用法</label></span>
+      <span><label>展示描述信息</label></span>
       <div v-html="state.val"></div>
     </nut-cell>
-     <!-- demo 基础用法 -->
+     <!-- demo 展示描述信息 -->
     <nut-actionsheet
       v-model:visible="state.isVisible"
       cancel-txt="取消"
@@ -211,10 +211,10 @@ export default {
       @click="switchActionSheet('isVisible')"
      
     >
-      <span><label>基础用法</label></span>
+      <span><label>选项状态</label></span>
       <div v-html="state.val"></div>
     </nut-cell>
-     <!-- demo 基础用法 -->
+     <!-- demo 选项状态 -->
     <nut-actionsheet
       v-model:visible="state.isVisible"
       :menu-items="menuItems"
@@ -264,7 +264,7 @@ export default {
 
 | 字段             | 说明                                   | 类型    | 默认值    |
 |------------------|----------------------------------------|---------|-----------|
-| v-model:visible       | 遮罩层可见                             | Boolean | false|
+| v-model:visible       | 是否展示动作面板                             | Boolean | false|
 | menu-items       | 列表项                                 | Array   | [ ]       |
 | option-tag       | 设置列表项标题展示使用参数                 | String  | 'name'    |
 | option-sub-tag   | 设置列表项二级标题展示使用参数             | String  | 'subname' |

src/packages/__VUE/shortpassword/demo.vue

@@ -15,7 +15,7 @@
     >
     </nut-shortpassword>
     <nut-cell
-      title="基础用法"
+      :title="translate('basic')"
       is-link
       @click="
         state.visible = true;
@@ -25,7 +25,7 @@
       "
     ></nut-cell>
     <nut-cell
-      title="显示按钮组"
+      :title="translate('showButtonGroup')"
       is-link
       @click="
         state.visible = true;
@@ -35,7 +35,7 @@
       "
     ></nut-cell>
     <nut-cell
-      title="自定义密码长度4"
+      :title="translate('customPasswordLength')"
       is-link
       @click="
         state.visible = true;
@@ -45,7 +45,7 @@
       "
     ></nut-cell>
     <nut-cell
-      title="忘记密码提示语事件回调"
+      :title="translate('forgetPassword')"
       is-link
       @click="
         state.visible = true;
@@ -55,13 +55,13 @@
       "
     ></nut-cell>
     <nut-cell
-      title="错误提示语"
+      :title="translate('errorMessage')"
       is-link
       @click="
         state.visible = true;
         state.length = 6;
         state.noButton = true;
-        state.errorMsg = '请输入正确密码';
+        state.errorMsg = translate('customErrorMsg');
       "
     ></nut-cell>
   </div>
@@ -70,7 +70,32 @@
 <script lang="ts">
 import { reactive, getCurrentInstance } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('shortpassword');
+const { createDemo, translate } = createComponent('shortpassword');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    showButtonGroup: '显示按钮组',
+    customPasswordLength: '自定义密码长度',
+    forgetPassword: '忘记密码',
+    errorMessage: '错误提示语',
+    customErrorMsg: '请输入正确密码',
+    onTips: '执行密码忘记逻辑',
+    close: '点击icon关闭弹窗',
+    cancelTips: '点击取消按钮关闭弹窗'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    showButtonGroup: 'Show Button Group',
+    customPasswordLength: 'Custom Password Length',
+    forgetPassword: 'Forget Password',
+    errorMessage: 'Error Message',
+    customErrorMsg: 'Please enter correct password',
+    onTips: 'Execute forgotten password logic',
+    close: 'Click the icon to close the popup',
+    cancelTips: 'Click the Cancel button to close the popup'
+  }
+});
 export default createDemo({
   setup() {
     let { proxy } = getCurrentInstance() as any;
@@ -92,19 +117,20 @@ export default createDemo({
       },
       onComplete() {},
       onTips() {
-        proxy.$toast.text('执行忘记密码逻辑');
+        proxy.$toast.text(translate('onTips'));
       },
       close() {
-        proxy.$toast.text('点击icon关闭弹窗');
+        proxy.$toast.text(translate('close'));
       },
       cancel() {
-        proxy.$toast.text('点击取消按钮关闭弹窗');
+        proxy.$toast.text(translate('cancelTips'));
       }
     };
 
     return {
       state,
-      methods
+      methods,
+      translate
     };
   }
 });

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

@@ -0,0 +1,294 @@
+# ShortPassword
+
+### Intro
+
+Short password input box, which can be used to enter passwords, SMS verification codes, etc.
+### Install
+
+``` javascript
+import { createApp } from 'vue';
+//vue
+import { ShortPassword,Popup } from '@nutui/nutui';
+//taro
+import { ShortPassword,Popup } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(ShortPassword);
+app.use(Popup);
+
+```
+
+
+### Basic Usage
+:::demo
+```html
+<template>
+<nut-cell title="Basic Usage" is-link @click="state.visible = true;"></nut-cell>
+ <nut-shortpassword
+      v-model="state.value"
+      v-model:visible="state.visible"
+      @change="methods.onChange"
+      @close="methods.close"
+      @cancel="methods.cancel"
+    >
+    </nut-shortpassword>
+</template>
+<script>
+import { reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default{
+  setup() {
+    const state = reactive({
+      visible: false,
+      value: '',
+    });
+    const methods = {
+      onChange(val) {
+        val && Toast.text(val);
+      },
+      close() {
+        Toast.text('Click the icon to close the popup');
+      },
+      cancel() {
+        Toast.text('Click the overlay to close the popup');
+      }
+    };
+    return {
+      state,
+      methods
+    };
+  }
+  }
+</script>
+```
+:::
+
+### Show Button Group
+:::demo
+```html
+<template>
+<nut-cell title="Show Button Group" is-link @click="state.visible = true;"></nut-cell>
+ <nut-shortpassword
+      v-model="state.value"
+      v-model:visible="state.visible"
+      :no-button="false"
+      @change="methods.onChange"
+      @ok="methods.onOk"
+      @close="methods.close"
+      @cancel="methods.cancel"
+    >
+    </nut-shortpassword>
+</template>
+<script>
+import { reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default{
+  setup() {
+    const state = reactive({
+      visible: false,
+      noButton: true,
+      value: '',
+      errorMsg: '',
+      length: 6
+    });
+    const methods = {
+      onChange(val) {
+        val && Toast.text(val);
+      },
+      onOk(val) {
+        val && Toast.text(val);
+        state.visible = false;
+      },
+       close() {
+        Toast.text('Click the icon to close the popup');
+      },
+      cancel() {
+        Toast.text('Click the overlay to close the popup');
+      }
+    };
+    return {
+      state,
+      methods
+    };
+  }
+  }
+</script>
+```
+:::
+
+### Custom Password Length
+
+:::demo
+```html
+<template>
+<nut-cell title="Custom Password Length" is-link @click="state.visible = true;"></nut-cell>
+ <nut-shortpassword
+      v-model="state.value"
+      v-model:visible="state.visible"
+      :length="state.length"
+      @change="methods.onChange"
+      @close="methods.close"
+      @cancel="methods.cancel"
+    >
+    </nut-shortpassword>
+</template>
+<script>
+import { reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default{
+  setup() {
+    const state = reactive({
+      visible: false,
+      value: '',
+      length: 4
+    });
+    const methods = {
+      onChange(val) {
+        val && Toast.text(val);
+      },
+      onOk(val) {
+        val && Toast.text(val);
+        state.visible = false;
+      },
+       close() {
+        Toast.text('Click the icon to close the popup');
+      },
+      cancel() {
+        Toast.text('Click the overlay to close the popup');
+      }
+    };
+    return {
+      state,
+      methods
+    };
+  }
+  }
+</script>
+```
+:::
+### Forget password
+
+
+:::demo
+```html
+<template>
+<nut-cell title="Forget password" is-link @click="state.visible = true;"></nut-cell>
+ <nut-shortpassword
+      v-model="state.value"
+      v-model:visible="state.visible"
+      @change="methods.onChange"
+      @close="methods.close"
+      @tips="methods.onTips"
+      @cancel="methods.cancel"
+    >
+    </nut-shortpassword>
+</template>
+<script>
+import { reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default{
+  setup() {
+    const state = reactive({
+      visible: false,
+      value: '',
+    });
+    const methods = {
+      onChange(val) {
+        val && Toast.text(val);
+      },
+      onTips() {
+        Toast.text('Execute forgotten password logic');
+      },
+      close() {
+        Toast.text('Click the icon to close the popup');
+      },
+      cancel() {
+        Toast.text('Click the overlay to close the popup');
+      }
+    };
+    return {
+      state,
+      methods
+    };
+  }
+  }
+</script>
+```
+:::
+
+### Error Message
+:::demo
+```html
+<template>
+<nut-cell title="Error Message" is-link @click="state.visible = true;"></nut-cell>
+ <nut-shortpassword
+      v-model="state.value"
+      v-model:visible="state.visible"
+      :error-msg="state.errorMsg"
+      @change="methods.onChange"
+      @close="methods.close"
+      @tips="methods.onTips"
+      @cancel="methods.cancel"
+    >
+    </nut-shortpassword>
+</template>
+<script>
+import { reactive } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default{
+  setup() {
+    const state = reactive({
+      visible: false,
+      value: '',
+      errorMsg: 'Please enter correct password',
+    });
+    const methods = {
+      onChange(val) {
+        val && Toast.text(val);
+      },
+      onTips() {
+        Toast.text('Execute forgotten password logic');
+      },
+      close() {
+        Toast.text('Click the icon to close the popup');
+      },
+      cancel() {
+        Toast.text('Click the overlay to close the popup');
+      }
+    };
+    return {
+      state,
+      methods
+    };
+  }
+  }
+</script>
+```
+:::
+
+### Prop
+
+
+| Attribute      | Description                                      | Type   | Default |
+|------------------------|---------------------|----------------|------------------------------|
+| v-model                | Current value        | String         |                              |
+| v-model:visible        | Whether to show shortpassword    | Boolean        | false                        |
+| title                  | title                | String         | Please enter password                   |
+| desc                   | description          | String         | Verify |
+| tips                   | Bottom right prompt              | String         | Forget password                     |
+| close-on-click-overlay | Click to close the mask    | Boolean        | true                         |
+| no-button              | whether to hide the bottom button    | Boolean        | true                         |
+| length                 | ShortPassword lenght The value is 4~6| String、Number | 6                            |
+| error-msg              | Error message        | String         | ''                           |
+
+
+### Event
+
+| Event | Description                  | Arguments    |
+|----------|------------------------|----------|
+| change   | Trigger event when password is entered     |  value    |
+| ok       | Trigger event when true is clicked     | value    |
+| cancel   | Trigger an event when the popup layer is clicked or canceled     | -    |
+| close    | Trigger an event when the close icon is clicked | -    |
+| complete | Input complete callback         | value    |
+

src/packages/__VUE/tabbar/demo.vue

@@ -1,83 +1,83 @@
 <template>
   <div class="demo full">
-    <h2>基础用法</h2>
+    <h2>{{ translate('basic') }}</h2>
 
     <nut-tabbar @tab-switch="tabSwitch">
-      <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="home"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="category"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="find"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="cart"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="my"></nut-tabbar-item>
     </nut-tabbar>
-    <h2>自定义图片</h2>
+    <h2>{{ translate('customImg') }}</h2>
 
     <nut-tabbar @tab-switch="tabSwitch">
       <nut-tabbar-item
-        tab-title="首页"
+        :tab-title="translate('title')"
         img="http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg"
         activeImg="http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg"
       ></nut-tabbar-item>
       <nut-tabbar-item
-        tab-title="分类"
+        :tab-title="translate('title')"
         img="http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"
         activeImg="http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg"
       ></nut-tabbar-item>
       <nut-tabbar-item
-        tab-title="发现"
+        :tab-title="translate('title')"
         img="http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"
         activeImg="http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg"
       ></nut-tabbar-item>
       <nut-tabbar-item
-        tab-title="购物车"
+        :tab-title="translate('title')"
         img="http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"
         activeImg="http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg"
       ></nut-tabbar-item>
       <nut-tabbar-item
-        tab-title="我的"
+        :tab-title="translate('title')"
         img="http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"
         activeImg="http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg"
       ></nut-tabbar-item>
     </nut-tabbar>
 
-    <h2>自定义选中</h2>
+    <h2>{{ translate('customCheck') }}</h2>
     <nut-tabbar v-model:visible="active" size="18px">
-      <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="home"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="category"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="find"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="cart"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="my"></nut-tabbar-item>
     </nut-tabbar>
 
-    <h2>徽标提示</h2>
+    <h2>{{ translate('showBadge') }}</h2>
     <nut-tabbar>
-      <nut-tabbar-item tab-title="首页" icon="home" num="11"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="分类" icon="category" :dot="true"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="购物车" icon="cart" num="110"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="home" num="11"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="category" :dot="true"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="find"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="cart" num="110"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="my"></nut-tabbar-item>
     </nut-tabbar>
 
-    <h2>自定义颜色</h2>
+    <h2>{{ translate('customColor') }}</h2>
     <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
-      <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="home"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="category"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="find"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="cart"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="my"></nut-tabbar-item>
     </nut-tabbar>
-    <h2>三个icon的tabbar</h2>
+    <h2>{{ translate('customQuantity') }}</h2>
     <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
-      <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="home"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="category"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="find"></nut-tabbar-item>
     </nut-tabbar>
-    <h2>固定底部，可自由跳转</h2>
+    <h2>{{ translate('fixedBottom') }}</h2>
     <nut-tabbar :bottom="true" :safeAreaInsetBottom="true">
-      <nut-tabbar-item tab-title="首页" href="" icon="home"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="购物车" href="https://m.jd.com" icon="cart"></nut-tabbar-item>
-      <nut-tabbar-item tab-title="我的" href="######" icon="my"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" href="" icon="home"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="category"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="find"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" href="https://m.jd.com" icon="cart"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" href="######" icon="my"></nut-tabbar-item>
     </nut-tabbar>
   </div>
 </template>
@@ -85,7 +85,30 @@
 <script lang="ts">
 import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('tabbar');
+const { createDemo, translate } = createComponent('tabbar');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    customImg: '自定义图片',
+    customCheck: '自定义选中',
+    showBadge: '徽标提示',
+    customColor: '自定义颜色',
+    customQuantity: '自定义数量',
+    fixedBottom: '固定底部',
+    title: '标签'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    customImg: 'Custom Img',
+    customCheck: 'Custom Check',
+    showBadge: 'Show Badge',
+    customColor: 'Custom Color',
+    customQuantity: 'Custom Quantity',
+    fixedBottom: 'Fixed Bottom',
+    title: 'tab'
+  }
+});
 export default createDemo({
   props: {},
   setup() {
@@ -95,7 +118,8 @@ export default createDemo({
     }
     return {
       active,
-      tabSwitch
+      tabSwitch,
+      translate
     };
   }
 });

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

@@ -0,0 +1,211 @@
+# TabBar
+
+### Intro
+
+Bottom navigation bar
+### Install
+
+``` javascript
+import { createApp } from 'vue';
+//vue
+import { Tabbar,TabbarItem,Icon } from '@nutui/nutui';
+//taro
+import { Tabbar,TabbarItem,Icon } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(Tabbar);
+app.use(TabbarItem);
+
+```
+
+
+### Basic Usage
+If you need to use more icons based on the existing Icon, please refer to the Icon component custom icon introduction
+
+:::demo
+```html
+<template>
+<nut-tabbar @tab-switch="tabSwitch">
+  <nut-tabbar-item tab-title="tab" icon="home"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="tab" icon="category"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="tab" icon="find"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="tab" icon="cart"></nut-tabbar-item>
+  <nut-tabbar-item tab-title="tab" icon="my"></nut-tabbar-item>
+</nut-tabbar>
+</template>
+<script>
+  export default{
+    setup() {
+      function tabSwitch(item, index) {
+        console.log(item, index);
+      }
+      return {
+        tabSwitch,
+      };
+    },
+  }
+  
+</script>
+```
+:::
+
+
+### Custom Img
+:::demo
+```html
+<template>
+<nut-tabbar @tab-switch="tabSwitch">
+      <nut-tabbar-item
+        tab-title="tab"
+        img="http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg"
+        activeImg="http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        tab-title="tab"
+        img="http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"
+        activeImg="http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        tab-title="tab"
+        img="http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"
+        activeImg="http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        tab-title="tab"
+        img="http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"
+        activeImg="http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        tab-title="tab"
+        img="http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"
+        activeImg="http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg"
+      ></nut-tabbar-item>
+    </nut-tabbar>
+</template>
+<script>
+  export default{
+    setup() {
+      function tabSwitch(item, index) {
+        console.log(item, index);
+      }
+      return {
+        tabSwitch,
+      };
+    },
+  }
+  
+</script>
+```
+:::
+
+### Custom Check
+:::demo
+```html
+<template>
+<nut-tabbar v-model:visible="active" size="18px">
+      <nut-tabbar-item tab-title="tab" icon="home"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="tab" icon="category"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="tab" icon="find"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="tab" icon="cart"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="tab" icon="my"></nut-tabbar-item>
+    </nut-tabbar>
+</template>
+```
+:::
+### Show Badge
+:::demo
+```html
+<template>
+  <nut-tabbar>
+    <nut-tabbar-item tab-title="tab" icon="home" num="11"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="tab" icon="category"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="tab" icon="find"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="tab" icon="cart" num="110"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="tab" icon="my"></nut-tabbar-item>
+  </nut-tabbar>
+</template>
+```
+:::
+### Custom Color
+
+
+:::demo
+```html
+<template>
+ <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
+      <nut-tabbar-item tab-title="tab" icon="home"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="tab" icon="category"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="tab" icon="find"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="tab" icon="cart"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="tab" icon="my"></nut-tabbar-item>
+    </nut-tabbar>
+</template>
+```
+:::
+
+### Custom Quantity
+
+
+:::demo
+```html
+<template>
+  <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
+    <nut-tabbar-item tab-title="tab" icon="home"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="tab" icon="category"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="tab" icon="find"></nut-tabbar-item>
+  </nut-tabbar>
+</template>
+```
+:::
+### Fixed Bottom
+
+
+:::demo
+```html
+<template>
+  <nut-tabbar :bottom="true" :safeAreaInsetBottom="true">
+    <nut-tabbar-item tab-title="tab" href="" icon="home"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="tab" icon="category"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="tab" icon="find"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="tab" href="https://m.jd.com" icon="cart"></nut-tabbar-item>
+    <nut-tabbar-item tab-title="tab" href="######" icon="my"></nut-tabbar-item>
+  </nut-tabbar>
+</template>
+```
+:::
+### Prop
+
+### nut-tabbar
+
+| Attribute            | Description               | Type   | Default  |
+|-----------------|--------------------|--------|---------|
+| v-model:visible | The index value of the selected label  | number | 0       |
+| bottom          | Whether to fix the bottom | boolean | false   |
+| size          | icon size | string | '20px'  |
+| unactive-color  | Color of unactive tab item  | string | #7d7e80 |
+| active-color    | Color of active tab item    | string | #1989fa |
+| safe-area-inset-bottom   | Whether to enable bottom safe area adaptation    | boolean | false |
+### tabbar-item
+
+| Attribute      | Description                                      | Type   | Default |
+|-----------|-------------------------------------------|--------|--------|
+| tab-title | title                              | string | --     |
+| icon      | icon name   | string | --     |
+| font-class-name |Custom icon font base class name    | string           | `nutui-iconfont` |
+| class-prefix | Custom icon class name prefix for using custom icons     | string           | `nut-icon` |
+| img      | ImgUrl of unactive tab item | String | --     |
+| active-img      | ImgUrl of active tab item（Only one icon and img can be selected in the same item） | string | --     |
+| href      | Jump links for tabs                          | string | --     |
+| to  `applet not supported`      | 	Target route of the link, same as to of vue-router | string｜object | --     |
+| num       | Numbered corner label in the upper right corner of the tab    | number | --     |
+| dot       | Whether to show red dot   | boolean | false    |
+
+
+### Event
+
+| Event | Description                  | Arguments    |
+|------------|--------------------|--------------------|
+| tab-switch | 	Emitted when changing active tab | item,index |
+
+
+