docs(fixednav): add international en-us

src/packages/__VUE/fixednav/demo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo">
     <nut-fixednav
-      active-text="基础用法"
+      :active-text="translate('basic')"
       :position="{ top: '70px' }"
       v-model:visible="visible"
       :nav-list="navList"
@@ -11,8 +11,8 @@
       type="left"
       :position="{ top: '140px' }"
       v-model:visible="visible1"
-      active-text="左侧收起"
-      un-active-text="左侧展开"
+      :active-text="translate('left1')"
+      :un-active-text="translate('left2')"
       :nav-list="navList"
       @selected="selected"
     />
@@ -23,7 +23,6 @@
       :nav-list="navList"
       @selected="selected"
     />
-
     <nut-fixednav :position="{ top: '280px' }" type="left" v-model:visible="myActive" @selected="selected">
       <template v-slot:list>
         <ul class="nut-fixednav__list">
@@ -36,21 +35,53 @@
       </template>
       <template v-slot:btn>
         <nut-icon name="retweet" color="#fff"> </nut-icon>
-        <span class="text">{{ myActive ? '自定义开' : '自定义关' }}</span>
+        <span class="text">{{ myActive ? translate('cus1') : translate('cus2') }}</span>
       </template>
     </nut-fixednav>
 
     <!-- 配合 Drag 支持拖拽 ，小程序暂不支持 -->
     <nut-drag direction="y" :style="{ right: '0px', bottom: '240px' }">
-      <nut-fixednav un-active-text="支持拖拽" v-model:visible="visible3" :nav-list="navList" @selected="selected" />
+      <nut-fixednav
+        :un-active-text="translate('drag')"
+        v-model:visible="visible3"
+        :nav-list="navList"
+        @selected="selected"
+      />
     </nut-drag>
   </div>
 </template>
 
 <script lang="ts">
-import { onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('fixednav');
+const { createDemo, translate } = createComponent('fixednav');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    left1: '左侧收起',
+    left2: '左侧展开',
+    cus1: '关',
+    cus2: '开',
+    drag: '支持拖拽',
+    index: '首页',
+    category: '分类',
+    cart: '购物车',
+    my: '我的'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    left1: 'Left Closed',
+    left2: 'Left Open',
+    cus1: 'Closed',
+    cus2: 'Open',
+    drag: 'Drag',
+    index: 'Index',
+    category: 'Category',
+    cart: 'Cart',
+    my: 'My'
+  }
+});
 export default createDemo({
   props: {},
   setup() {
@@ -66,26 +97,26 @@ export default createDemo({
       }, 1000);
     });
 
-    const navList = reactive([
+    const navList = computed(() => [
       {
         id: 1,
-        text: '首页',
+        text: translate('index'),
         icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
       },
       {
         id: 2,
-        text: '分类',
+        text: translate('category'),
         icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
       },
       {
         id: 3,
-        text: '购物车',
+        text: translate('cart'),
         num: 2,
         icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
       },
       {
         id: 4,
-        text: '我的',
+        text: translate('my'),
         icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
       }
     ]);
@@ -99,7 +130,8 @@ export default createDemo({
       visible3,
       myActive,
       navList,
-      selected
+      selected,
+      translate
     };
   }
 });

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

@@ -0,0 +1,176 @@
+# FixedNav
+
+### Intro
+
+Hover stow experience Interaction for quick navigation
+
+### Install
+    
+``` javascript
+import { createApp } from 'vue';
+// vue
+import { FixedNav,OverLay } from '@nutui/nutui';
+// taro
+import { FixedNav,OverLay } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(FixedNav);
+app.use(OverLay);
+
+```
+
+
+### Basic Usage
+
+:::demo
+```html
+<template>
+  <nut-fixednav :position="{top:'70px' }" v-model:visible="visible" :nav-list="navList" />
+</template>
+<script lang="ts">
+import { ref,reactive } from 'vue';
+export default {
+ setup() {
+    const visible = ref(false);
+    const navList = reactive([
+      {
+        id: 1,
+        text: 'Index',
+        icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+      },
+      {
+        id: 2,
+        text: 'Category',
+        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+      },
+      {
+        id: 3,
+        text: 'Cart',
+        num: 2,
+        icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+      },
+      {
+        id: 4,
+        text: 'My',
+        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+      }
+    ]);
+    return {
+      visible,
+      navList
+    };
+ }
+}
+</script>
+```
+:::
+
+### Left effect
+
+``` html
+<nut-fixednav type="left" :position="{top:'140px' }" v-model:visible="visible" :nav-list="navList" />
+```
+
+
+### Unmask background
+
+``` html
+<nut-fixednav :overlay="false"  :position="{top:'210px' }" v-model:visible="visible" :nav-list="navList" />
+```
+
+### Support drag and drop with drag
+
+``` html
+<nut-drag direction="y" :style="{right:'0px',bottom:'240px'}">
+  <nut-fixednav un-active-text="drag" v-model:visible="visible" :nav-list="navList" />
+</nut-drag>
+```
+
+### Custom use
+
+:::demo
+```html
+<template>
+<nut-fixednav :position="{top:'280px' }" type="left" v-model:visible="myActive">
+    <template v-slot:list>
+        <ul class="nut-fixednav__list">
+            <li class="nut-fixednav__list-item">1</li>
+            <li class="nut-fixednav__list-item">2</li>
+            <li class="nut-fixednav__list-item">3</li>
+            <li class="nut-fixednav__list-item">4</li>
+            <li class="nut-fixednav__list-item">5</li>
+        </ul>
+    </template>
+<template v-slot:btn>
+    <nut-icon name="retweet" color="#fff">
+    </nut-icon>
+    <span class="text">{{ myActive ? 'Open' : 'Close' }}</span>
+</template>
+</nut-fixednav>
+</template>
+<script lang="ts">
+import { ref,reactive } from 'vue';
+export default {
+ setup() {
+    const myActive = ref(false);
+    const navList = reactive([
+      {
+        id: 1,
+        text: 'Index',
+        icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/117646/2/11112/1297/5ef83e95E81d77f05/daf8e3b1c81e3c98.png'
+      },
+      {
+        id: 2,
+        text: 'Category',
+        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/119490/8/9568/1798/5ef83e95E968c69a6/dd029326f7d5042e.png'
+      },
+      {
+        id: 3,
+        text: 'Cart',
+        num: 2,
+        icon: 'https://img14.360buyimg.com/imagetools/jfs/t1/130725/4/3157/1704/5ef83e95Eb976644f/b36c6cfc1cc1a99d.png'
+      },
+      {
+        id: 4,
+        text: 'My',
+        icon: 'https://img12.360buyimg.com/imagetools/jfs/t1/147573/29/1603/1721/5ef83e94E1393a678/5ddf1695ec989373.png'
+      }
+    ]);
+    return {
+      myActive,
+      navList
+    };
+ }
+}
+</script>
+```
+:::
+
+
+### Prop
+| Attribute      | Description                                         | Type    | Default                      |
+|:---------------|:----------------------------------------------------|:--------|:-----------------------------|
+| visible        | visible is                                          | Boolean | false                        |
+| nav-list       | Suspended list content data                         | Array   | []                           |
+| active-text    | Stow list button copy                               | String  | Close Nav                    |
+| un-active-text | Expand list button copy                             | String  | Open Nav                     |
+| type           | Navigation direction, optional value `left` `right` | String  | right                        |
+| overlay        | Whether to display the mask when expanding          | Boolean | true                         |
+| position       | `fixed` Vertical position                           | Object  | {top: 'auto',bottom: 'auto'} |
+
+
+### Event
+
+| Event    | Description               | Arguments                |
+|----------|---------------------------|--------------------------|
+| selected | Triggered after selection | {item:item,$event:Event} |
+
+
+### Slot
+
+| Name | Description                       |
+|------|-----------------------------------|
+| btn  | slot custom button                |
+| list | slot custom expanded list content |
+
+    

src/packages/__VUE/fixednav/doc.md

@@ -2,19 +2,20 @@
 
 ### 介绍
 
-悬浮收齐体验交互，用于快捷导航
+悬浮收起体验交互，用于快捷导航
 
 ### 安装
     
 ``` javascript
 import { createApp } from 'vue';
 // vue
-import { FixedNav } from '@nutui/nutui';
+import { FixedNav,OverLay } from '@nutui/nutui';
 // taro
-import { FixedNav } from '@nutui/nutui-taro';
+import { FixedNav,OverLay } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(FixedNav);
+app.use(OverLay);
 
 ```
 

src/packages/utils/create/component.ts

@@ -13,7 +13,7 @@ export function createComponent(name: string) {
   const componentName = 'nut-' + name;
   return {
     componentName,
-    translate(keyPath: string, ...args: unknown[]) {
+    translate(keyPath: string, ...args: unknown[]): string {
       // 依赖响应能力
       const languages = locale.languages();
       const text = getPropByPath(languages, `${name.replace('-', '')}.${keyPath}`) || getPropByPath(languages, keyPath);