feat: infiniteloading 与 NoticeBar 进行国际化修改 (#1246)

* feat: 冲突解决 (#2)

* fix(uploader): taro h5 env upload error #1096

* fix: taro 3.4.6 sass calc error #1200

* fix(uploader): taro env formdata type error

* chore: add international components signature

* chore: add international components ecard

* chore: add international components timeselect

* chore: add international components sku

* fix: demo textarea 自适应 (#1201)

* feat: add translations chinese traditional

* docs: open international

* fix: input show-word-limit default false (#1203)

* refactor(circleprogress): add features (#1204)

* fix(popup): 修复popup在Taro转H5下的渲染问题

* feat: avatar能力补齐、input doc文档更新 (#1195)

* fix: 修改input单元测试

* fix: 增加avatar group

* fix: 更新input md

* fix: avatar能力补齐

* fix: avatar能力补齐、适配taro

* feat: 迁移 AddressList、Category 组件，适配taro

* fix: 修改input md

Co-authored-by: richard1015 <51844712@qq.com>

* chore: add international components addresslist

Co-authored-by: richard1015 <51844712@qq.com>
Co-authored-by: Ymm <being0008@163.com>
Co-authored-by: Lei Wang <wlchn@qq.com>
Co-authored-by: Drjingfubo <50685476+Drjingfubo@users.noreply.github.com>
Co-authored-by: suzigang <1039168735@qq.com>
Co-authored-by: ailululu <912429321@qq.com>

* feat: picker与DatePicker新增slot插槽

* fix: datepicker 问题修改

* fix: infiniteloading issue 问题修改(#1189)

* fix: countdown 问题修改

* feat: 冲突解决

* feat: 初版

* feat: countdown 单元测试

* feat: 文档补齐

* fix: datepicker 初始化时平铺展示 bug 修改

* feat: git action 增加 doc.en-US 文件复制

* fix: 单元测试

* fix: cascader 组件完善

* feat: cascader taro 适配

* feat: infiniteloading 国际化修改

* feat: 通告栏

* feat: infiniteloading 增加slot

* feat: infiniteloading 添加 slot

Co-authored-by: richard1015 <51844712@qq.com>
Co-authored-by: Ymm <being0008@163.com>
Co-authored-by: Lei Wang <wlchn@qq.com>
Co-authored-by: Drjingfubo <50685476+Drjingfubo@users.noreply.github.com>
Co-authored-by: suzigang <1039168735@qq.com>
Co-authored-by: ailululu <912429321@qq.com>

src/packages/__VUE/infiniteloading/demo.vue

@@ -1,53 +1,73 @@
 <template>
   <div class="demo">
-    <h2>基础用法</h2>
-    <nut-cell>
-      <ul class="infiniteUl" id="scroll">
-        <nut-infiniteloading container-id="scroll" :use-window="false" :has-more="hasMore" @load-more="loadMore">
-          <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{ item }}</li>
-        </nut-infiniteloading>
-      </ul>
-    </nut-cell>
-
-    <h2>下拉刷新</h2>
-    <nut-cell>
-      <ul class="infiniteUl" id="refreshScroll">
-        <nut-infiniteloading
-          pull-icon="JD"
-          container-id="refreshScroll"
-          :use-window="false"
-          :is-open-refresh="true"
-          :has-more="refreshHasMore"
-          @load-more="refreshLoadMore"
-          @refresh="refresh"
-        >
-          <li class="infiniteLi" v-for="(item, index) in refreshList" :key="index">{{ item }}</li>
-        </nut-infiniteloading>
-      </ul>
-    </nut-cell>
-
-    <h2>自定义加载文案</h2>
-    <nut-cell>
-      <ul class="infiniteUl" id="customScroll">
-        <nut-infiniteloading
-          load-txt="loading"
-          load-more-txt="没有啦～"
-          container-id="customScroll"
-          :use-window="false"
-          :has-more="customHasMore"
-          @load-more="customLoadMore"
-        >
-          <li class="infiniteLi" v-for="(item, index) in customList" :key="index">{{ item }}</li>
-        </nut-infiniteloading>
-      </ul>
-    </nut-cell>
+    <nut-cell-group :title="translate('basic')">
+      <nut-cell>
+        <ul class="infiniteUl" id="scroll">
+          <nut-infiniteloading container-id="scroll" :use-window="false" :has-more="hasMore" @load-more="loadMore">
+            <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{ item }}</li>
+          </nut-infiniteloading>
+        </ul>
+      </nut-cell>
+    </nut-cell-group>
+    <nut-cell-group :title="translate('pullRefresh')">
+      <nut-cell>
+        <ul class="infiniteUl" id="refreshScroll">
+          <nut-infiniteloading
+            pull-icon="JD"
+            container-id="refreshScroll"
+            :use-window="false"
+            :is-open-refresh="true"
+            :has-more="refreshHasMore"
+            @load-more="refreshLoadMore"
+            @refresh="refresh"
+          >
+            <li class="infiniteLi" v-for="(item, index) in refreshList" :key="index">{{ item }}</li>
+          </nut-infiniteloading>
+        </ul>
+      </nut-cell>
+    </nut-cell-group>
+    <nut-cell-group :title="translate('customTxt')">
+      <nut-cell>
+        <ul class="infiniteUl" id="customScroll">
+          <nut-infiniteloading
+            load-txt="loading"
+            :load-more-txt="translate('none')"
+            container-id="customScroll"
+            :use-window="false"
+            :has-more="customHasMore"
+            @load-more="customLoadMore"
+          >
+            <li class="infiniteLi" v-for="(item, index) in customList" :key="index">{{ item }}</li>
+          </nut-infiniteloading>
+        </ul>
+      </nut-cell>
+    </nut-cell-group>
   </div>
 </template>
 
 <script lang="ts">
 import { onMounted, ref, reactive, toRefs, getCurrentInstance } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('infiniteloading');
+const { createDemo, translate } = createComponent('infiniteloading');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+
+useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    pullRefresh: '下拉刷新',
+    customTxt: '自定义加载文案',
+    none: '没有啦~',
+    success: '刷新成功'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    pullRefresh: 'Pull to refresh',
+    customTxt: 'Custom loading copywriting',
+    none: 'No more',
+    success: 'Refresh success'
+  }
+});
+
 export default createDemo({
   props: {},
   setup() {
@@ -90,7 +110,6 @@ export default createDemo({
 
     const refreshLoadMore = (done) => {
       setTimeout(() => {
-        console.log('demo 加载更多');
         const curLen = data.refreshList.length;
         for (let i = curLen; i < curLen + 10; i++) {
           data.refreshList.push(`${i}`);
@@ -102,7 +121,7 @@ export default createDemo({
 
     const refresh = (done) => {
       setTimeout(() => {
-        proxy.$toast.text('刷新成功');
+        proxy.$toast.text(translate('success'));
         data.refreshList = data.refreshList.slice(0, 10);
         refreshHasMore.value = true;
         done();
@@ -128,6 +147,7 @@ export default createDemo({
       refreshHasMore,
       refreshLoadMore,
       refresh,
+      translate,
       ...toRefs(data)
     };
   }

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

@@ -0,0 +1,278 @@
+# InfiniteLoading
+
+### Intro
+
+Scrolling to the bottom of the list automatically loads more data.
+
+### Install
+
+```javascript
+  import { createApp } from 'vue';
+  import { InfiniteLoading } from '@nutui/nutui';
+
+  const app = createApp();
+  app.use(InfiniteLoading);
+```
+
+### Basic Usage
+
+:::demo
+
+```html
+<template>
+  <ul class="infiniteUl" id="scroll"  style='height: 300px;'>
+    <nut-infiniteloading
+        containerId = 'scroll'
+        :use-window='false'
+        :has-more="hasMore"
+        @load-more="loadMore"
+    >
+        <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{item}}</li>
+    </nut-infiniteloading>
+  </ul>
+</template>
+
+<script>
+  import { ref,reactive,onMounted,toRefs} from 'vue';
+  export default {
+    setup(props) {
+      const hasMore = ref(true);
+      const data = reactive({
+        defultList: []
+      });
+      const loadMore = done => {  
+        setTimeout(() => {
+          const curLen = data.defultList.length;
+          for (let i = curLen; i < curLen + 10; i++) {
+            data.defultList.push(`${i}`);
+          }
+          if (data.defultList.length > 30) hasMore.value = false;
+          done()
+        }, 500);
+      };
+      const init = () => {
+        for (let i = 0; i < 10; i++) {
+          data.defultList.push(`${i}`);
+        }
+      }
+      onMounted(() => {
+        init()
+      });
+      return { loadMore, hasMore, ...toRefs(data) };
+    }
+  }
+</script>
+
+<style>
+.infiniteUl {
+  height: 300px;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background:#eee
+}
+.infiniteLi {
+  margin-top: 10px;
+  font-size: 14px;
+  color: rgba(100, 100, 100, 1);
+  text-align: center;
+}
+</style>
+```
+
+:::
+
+### Pull to refresh
+
+:::demo
+
+```html
+<template>
+  <ul class="infiniteUl" id="refreshScroll" style='height: 300px;'>
+    <nut-infiniteloading
+      pull-icon="JD"
+      container-id="refreshScroll"
+      :use-window="false"
+      :is-open-refresh="true"
+      :has-more="refreshHasMore"
+      @load-more="refreshLoadMore"
+      @refresh="refresh"
+    >
+      <li
+        class="infiniteLi"
+        v-for="(item, index) in refreshList"
+        :key="index"
+        >{{ item }}</li
+      >
+    </nut-infiniteloading>
+  </ul>
+</template>
+
+<script>
+  import { ref,reactive,onMounted,toRefs} from 'vue';
+  import { Toast } from '@nutui/nutui';
+  export default {
+    setup(props) {
+      const refreshHasMore = ref(true);
+      const data = reactive({
+        refreshList: []
+      });
+      const refreshLoadMore = done => {
+        setTimeout(() => {
+          const curLen = data.refreshList.length;
+          for (let i = curLen; i < curLen + 10; i++) {
+            data.refreshList.push(
+              `${i}`
+            );
+          }
+          if (data.refreshList.length > 30) refreshHasMore.value = false;
+          done()
+        }, 500);
+      };
+
+      const refresh = (done) => {
+        setTimeout(()=>{
+          Toast.success('Refresh success');
+          done()
+        },1000)
+      }
+      const init = () => {
+        for (let i = 0; i < 10; i++) {
+          data.refreshList.push(`${i}`);
+        }
+      }
+      onMounted(() => {
+        init()
+      });
+      return { refreshLoadMore, refreshHasMore, refresh, ...toRefs(data) };
+    }
+  }
+</script>
+
+<style>
+.infiniteUl {
+  height: 300px;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background:#eee
+}
+.infiniteLi {
+  margin-top: 10px;
+  font-size: 14px;
+  color: rgba(100, 100, 100, 1);
+  text-align: center;
+}
+</style>
+```
+
+:::
+
+### Custom loading copywriting
+
+:::demo
+
+```html
+<template>
+  <ul class="infiniteUl" id="customScroll">
+    <nut-infiniteloading
+      load-txt="loading"
+      load-more-txt="No more"
+      container-id="customScroll"
+      :use-window="false"
+      :has-more="customHasMore"
+      @load-more="customLoadMore"
+    >
+      <li class="infiniteLi" v-for="(item, index) in customList" :key="index">{{ item }}</li>
+    </nut-infiniteloading>
+  </ul>
+</template>
+
+<script>
+  import { ref,reactive,onMounted,toRefs} from 'vue';
+  export default {
+    setup(props) {
+      const customHasMore = ref(true);
+      const data = reactive({
+        customList: ['']
+      });
+      const customLoadMore = done => {
+        setTimeout(() => {
+          const curLen = data.customList.length;
+          for (let i = curLen; i < curLen + 10; i++) {
+            data.customList.push(`${i}`);
+          }
+          if (data.customList.length > 30) customHasMore.value = false;
+          done()
+        }, 500);
+      };
+      const init = () => {
+        for (let i = 0; i < 10; i++) {
+          data.customList.push(`${i}`);
+        }
+      }
+      onMounted(() => {
+        init()
+      });
+      return { customHasMore, customLoadMore,...toRefs(data) };
+    }
+  }
+</script>
+
+<style>
+.infiniteUl {
+  height: 300px;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background:#eee
+}
+.infiniteLi {
+  margin-top: 10px;
+  font-size: 14px;
+  color: rgba(100, 100, 100, 1);
+  text-align: center;
+}
+</style>
+```
+
+:::
+
+## API
+
+### Props
+
+| Attribute        | Description                                                                                                        | Type    | Default          |
+|------------------|--------------------------------------------------------------------------------------------------------------------|---------|------------------|
+| has-more         | Has more data                                                                                                      | Boolean | `true`           |
+| threshold        | The loadMore event will be Emitted when the distance between the scrollbar and the bottom is less than threshold   | Number  | `200`            |
+| use-window       | Add the scroll listener to the window or the parent of the listening component                                     | Boolean | `true`           |
+| use-capture      | Whether to use capture mode                                                                                        | Boolean | `false`          |
+| container-id     | When useWindow is false, set the node ID by default                                                                | String  | `''`             |
+| load-more-txt    | "No more" text                                                                                                     | String  | 'Oops, this is the bottom'|
+| is-open-refresh  | Enable pull refresh                                                                                                | Boolean | `false`          |
+| pull-icon        | Pull refresh[图标名称](#/icon)                                                                                       | String  | <img src="https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png" width=40/>                |
+| pull-txt         | Pull refresh text                                                                                                   | String  |`Loose to refresh`|
+| load-icon        | Pull on loading[图标名称](#/icon)                                                                                    | Boolean | <img src="https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png" width=40 />                |
+| load-txt         | Pull on loading text                                                                                                | String  | `Loading...`      |
+
+### Events
+
+| Event          | Description                         | Arguments      |
+|----------------|-------------------------------------|----------------|
+| load-more      | Emitted when continues to load      | done()         |
+| scroll-change  | Real-time monitoring of roll height | height         |
+| refresh        | Emitted when pull refresh           | done()         |
+
+### Slots
+
+| Attribute | Description  | 
+|--------|----------------|
+| loading  | Loading text |
+| finished  | Finished text |

src/packages/__VUE/infiniteloading/doc.md

@@ -14,8 +14,6 @@
   app.use(InfiniteLoading);
 ```
 
-## 代码演示
-    
 ### 基础用法
 
 
@@ -248,7 +246,7 @@
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
 | has-more         | 是否还有更多数据               | Boolean | `true`                |
-| threshold         | 距离底部多远加载 | Number | `200`               |
+| threshold         | 滚动条与底部距离小于 threshold 时触发 loadMore 事件 | Number | `200`               |
 | use-window | 将滚动侦听器添加到 window 否则侦听组件的父节点     | Boolean | `true` |
 | use-capture          | 是否使用捕获模式 true 捕获 false 冒泡                        | Boolean | `false`            |
 | container-id          | 在 useWindow 属性为 false 的时候，自定义设置节点ID                        | String | `''`            |
@@ -266,4 +264,10 @@
 | load-more  | 继续加载的回调函数 | done 函数，用于关闭加载中状态 |
 | scroll-change  | 实时监听滚动高度 | 滚动高度 |
 | refresh  | 下拉刷新事件回调 | done 函数，用于关闭加载中状态 |
-    
+
+### Slots
+
+| 名称 | 说明           | 
+|--------|----------------|
+| loading  | 自定义底部记载中提示 |
+| finished  | 自定义加载完成后的提示文案 |

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

@@ -13,7 +13,7 @@
     <view class="nut-infinite-top" :style="getStyle">
       <view class="top-box" id="refreshTop">
         <nut-icon class="top-img" :name="pullIcon"></nut-icon>
-        <view class="top-text">{{ pullTxt }}</view>
+        <view class="top-text">{{ pullTxt || translate('pullTxt') }}</view>
       </view>
     </view>
 
@@ -25,11 +25,11 @@
       <template v-if="isInfiniting">
         <view class="bottom-box">
           <nut-icon class="bottom-img" :name="loadIcon"></nut-icon>
-          <view class="bottom-text">{{ loadTxt }}</view>
+          <view class="bottom-text">{{ loadTxt || translate('loading') }}</view>
         </view>
       </template>
       <template v-else-if="!hasMore">
-        <view class="tips">{{ loadMoreTxt }}</view>
+        <view class="tips">{{ loadMoreTxt || translate('loadMoreTxt') }}</view>
       </template>
     </view>
   </scroll-view>
@@ -37,7 +37,7 @@
 <script lang="ts">
 import { toRefs, onMounted, reactive, computed, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('infiniteloading');
+const { componentName, create, translate } = createComponent('infiniteloading');
 import Icon from '../icon/index.taro.vue';
 import Taro from '@tarojs/taro';
 export default create({
@@ -60,7 +60,7 @@ export default create({
     },
     pullTxt: {
       type: String,
-      default: '松开刷新'
+      default: ''
     },
     loadIcon: {
       type: String,
@@ -68,11 +68,11 @@ export default create({
     },
     loadTxt: {
       type: String,
-      default: '加载中···'
+      default: ''
     },
     loadMoreTxt: {
       type: String,
-      default: '哎呀，这里是底部了啦'
+      default: ''
     },
     useWindow: {
       type: Boolean,
@@ -218,7 +218,8 @@ export default create({
       touchStart,
       touchMove,
       touchEnd,
-      getStyle
+      getStyle,
+      translate
     };
   }
 });

src/packages/__VUE/infiniteloading/index.vue

@@ -3,7 +3,7 @@
     <view class="nut-infinite-top" ref="refreshTop" :style="getStyle">
       <view class="top-box">
         <nut-icon class="top-img" :name="pullIcon"></nut-icon>
-        <view class="top-text">{{ pullTxt }}</view>
+        <view class="top-text">{{ pullTxt || translate('pullTxt') }}</view>
       </view>
     </view>
 
@@ -14,12 +14,16 @@
     <view class="nut-infinite-bottom">
       <template v-if="isInfiniting">
         <view class="bottom-box">
-          <nut-icon class="bottom-img" :name="loadIcon"></nut-icon>
-          <view class="bottom-text">{{ loadTxt }}</view>
+          <template v-if="!slots.loading">
+            <nut-icon class="bottom-img" :name="loadIcon"></nut-icon>
+            <view class="bottom-text">{{ loadTxt || translate('loading') }}</view>
+          </template>
+          <slot name="loading" v-else></slot>
         </view>
       </template>
       <template v-else-if="!hasMore">
-        <view class="tips">{{ loadMoreTxt }}</view>
+        <view class="tips" v-if="!slots.finished">{{ loadMoreTxt || translate('loadMoreTxt') }}</view>
+        <slot name="finished" v-else></slot>
       </template>
     </view>
   </view>
@@ -37,7 +41,7 @@ import {
   ref
 } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('infiniteloading');
+const { componentName, create, translate } = createComponent('infiniteloading');
 export default create({
   props: {
     hasMore: {
@@ -54,7 +58,7 @@ export default create({
     },
     pullTxt: {
       type: String,
-      default: '松开刷新'
+      default: ''
     },
     loadIcon: {
       type: String,
@@ -62,11 +66,11 @@ export default create({
     },
     loadTxt: {
       type: String,
-      default: '加载中···'
+      default: ''
     },
     loadMoreTxt: {
       type: String,
-      default: '哎呀，这里是底部了啦'
+      default: ''
     },
     useWindow: {
       type: Boolean,
@@ -235,6 +239,8 @@ export default create({
       state.scrollEl = props.useWindow ? window : parentElement;
 
       scrollListener();
+
+      console.log(slots);
     });
 
     onUnmounted(() => {
@@ -261,7 +267,9 @@ export default create({
       touchStart,
       touchMove,
       touchEnd,
-      getStyle
+      getStyle,
+      translate,
+      slots
     };
   }
 });

src/packages/__VUE/noticebar/demo.vue

@@ -1,13 +1,11 @@
 <template>
   <div class="demo full">
-    <h2>默认用法</h2>
-    <nut-noticebar
-      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
-    ></nut-noticebar>
+    <h2>{{ translate('basic') }}</h2>
+    <nut-noticebar :text="translate('text')"></nut-noticebar>
 
-    <h2>滚动播放</h2>
+    <h2>{{ translate('scrollable') }}</h2>
     <nut-noticebar
-      text="华为畅享9新品即将上市"
+      :text="translate('textShort')"
       :scrollable="true"
       :background="`rgba(251, 248, 220, 1)`"
       :color="`#D9500B`"
@@ -15,15 +13,15 @@
     </nut-noticebar>
     <p />
     <nut-noticebar
-      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
+      :text="translate('text')"
       :scrollable="false"
       :background="`rgba(251, 248, 220, 1)`"
       :color="`#D9500B`"
     ></nut-noticebar>
 
-    <h2>通告栏模式--关闭模式</h2>
+    <h2>{{ translate('mode') }}</h2>
     <nut-noticebar :closeMode="true" @click="hello" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`"
-      >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
+      >{{ translate('text') }}
     </nut-noticebar>
     <p />
     <nut-noticebar
@@ -32,27 +30,26 @@
       @click="hello"
       :background="`rgba(251, 248, 220, 1)`"
       :color="`#D9500B`"
-      >华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
+      >{{ translate('text') }}
     </nut-noticebar>
-
-    <h2>通告栏模式--链接模式</h2>
+    <p />
     <nut-noticebar
       left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
       :background="`rgba(251, 248, 220, 1)`"
       :color="`#D9500B`"
     >
-      <a href="https://www.jd.com">京东商城</a>
+      <a href="https://www.jd.com">{{ translate('jd') }}</a>
     </nut-noticebar>
 
-    <h2>多行展示</h2>
+    <h2>{{ translate('multiline') }}</h2>
     <nut-noticebar
-      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
+      :text="translate('text')"
       wrapable
       :background="`rgba(251, 248, 220, 1)`"
       :color="`#D9500B`"
     ></nut-noticebar>
 
-    <h2>纵向滚动</h2>
+    <h2>{{ translate('vertical') }}</h2>
     <div class="interstroll-list">
       <nut-noticebar
         direction="vertical"
@@ -66,7 +63,7 @@
       ></nut-noticebar>
     </div>
 
-    <h2>纵向复杂滚动动画</h2>
+    <h2>{{ translate('complexAm') }}</h2>
     <div class="interstroll-list">
       <nut-noticebar
         direction="vertical"
@@ -78,7 +75,7 @@
         :color="`#D9500B`"
       ></nut-noticebar>
     </div>
-    <h2>纵向自定义滚动内容</h2>
+    <h2>{{ translate('customAm') }}</h2>
     <div class="interstroll-list">
       <nut-noticebar
         direction="vertical"
@@ -101,7 +98,7 @@
       </nut-noticebar>
     </div>
 
-    <h2>纵向自定义右侧图标</h2>
+    <h2>{{ translate('customRightIcon') }}</h2>
     <div class="interstroll-list">
       <nut-noticebar
         direction="vertical"
@@ -122,15 +119,48 @@
 <script lang="ts">
 import { onMounted, reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('noticebar');
+const { createDemo, translate } = createComponent('noticebar');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+
+useTranslate({
+  'zh-CN': {
+    basic: '基础使用',
+    scrollable: '滚动播放',
+    mode: '通告栏--关闭模式',
+    multiline: '多行展示',
+    vertical: '垂直滚动',
+    complexAm: '纵向--复杂滚动动画',
+    customAm: '纵向--自定义滚动内容',
+    customRightIcon: '纵向--自定义右侧图标',
+    text: 'NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。',
+    textShort: 'NutUI 是移动端组件库',
+    horseLamp: ['NoticeBar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮'],
+    jd: '京东商城'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    scrollable: 'Scrollable',
+    mode: 'Mode',
+    multiline: 'Wrapable',
+    vertical: 'Vertical Scroll',
+    complexAm: 'Vertical Scroll Complex Animation',
+    customAm: 'Vertical Scroll Custom Style',
+    customRightIcon: 'Vertical Scroll Custom Right Icon',
+    text: 'Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience.',
+    textShort: 'Nutui is a mobile terminal component library.',
+    horseLamp: ['NoticeBar', 'Cascader', 'DatePicker', 'CheckBox'],
+    jd: 'Jingdong'
+  }
+});
+
 export default createDemo({
   props: {},
   setup() {
     const state = reactive({
-      horseLamp1: ['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆'],
-      horseLamp2: ['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆'],
-      horseLamp3: ['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆'],
-      text: '华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！'
+      horseLamp1: translate('horseLamp'),
+      horseLamp2: translate('horseLamp'),
+      horseLamp3: translate('horseLamp'),
+      text: translate('text')
     });
 
     const hello = () => {
@@ -143,7 +173,8 @@ export default createDemo({
     return {
       ...toRefs(state),
       hello,
-      go
+      go,
+      translate
     };
   }
 });

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

@@ -0,0 +1,256 @@
+# NoticeBar
+
+### Intro
+
+Used to display a group of message notifications in a continuons loop.
+
+### Install
+
+```javascript
+
+import { createApp } from 'vue';
+// vue
+import { NoticeBar } from '@nutui/nutui';
+// taro
+import { NoticeBar } from '@nutui/nutui-taro';
+
+const app = createApp();
+app.use(NoticeBar);
+
+```
+
+### Basic Usage
+
+:::demo
+
+```html
+<template>
+  <nut-noticebar
+      text="Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience."
+      :background="`rgba(251, 248, 220, 1)`"
+      :color="`#D9500B`"
+    ></nut-noticebar>
+</template>
+
+```
+
+:::
+
+### Scrollable
+
+Scrolling is automatically enabled when the content length of the notification bar overflows, which can be controlled through the scrollable property.
+
+:::demo
+
+```html
+<template>
+  <nut-noticebar text="Nutui is a mobile terminal component library." :scrollable="true" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`"></nut-noticebar>
+
+  <nut-noticebar
+      text="Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience."
+      :scrollable="false"
+      :background="`rgba(251, 248, 220, 1)`"
+      :color="`#D9500B`"
+    ></nut-noticebar>
+</template>
+
+```
+
+:::
+
+### Mode
+
+:::demo
+
+```html
+<template>
+  <nut-noticebar :closeMode="true" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
+    Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience.
+  </nut-noticebar>
+ 
+  <nut-noticebar
+      :closeMode="true"
+      right-icon="circle-close"
+      :background="`rgba(251, 248, 220, 1)`"
+      :color="`#D9500B`"
+      >
+      Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience.
+  </nut-noticebar>
+
+  <nut-noticebar
+      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
+      :scrollable="false"
+    >
+      <a href="https://www.jd.com">Jingdong</a>
+    </nut-noticebar>
+</template>
+
+```
+:::
+
+### Wrapable
+
+When text is long, you can enable multi-line display by setting the wrapable property.
+
+:::demo
+
+```html
+<template>
+  <nut-noticebar
+      text="Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience."
+      wrapable
+      :background="`rgba(251, 248, 220, 1)`"
+      :color="`#D9500B`"
+    ></nut-noticebar>
+</template>
+```
+
+:::
+
+### Vertical Scroll
+
+:::demo
+
+```html
+<template>
+  <nut-noticebar 
+      direction='vertical' 
+      :list="horseLamp1" 
+      :speed='10' 
+      :standTime='1000' 
+      @click='go' 
+      :closeMode="true" 
+      :background="`rgba(251, 248, 220, 1)`"
+      :color="`#D9500B`">
+  </nut-noticebar>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const horseLamp1 = ref(['NoticeBar', 'Cascader', 'DatePicker', 'CheckBox']);
+      const go = (item) => {
+        console.log(item)
+      }
+      return { horseLamp1 };
+    }
+  }
+</script>
+```
+
+:::
+
+### Vertical Scroll Complex Animation
+
+:::demo
+
+```html
+<template>
+  <nut-noticebar direction='vertical' :list="horseLamp2" :speed='10' :standTime='2000' :complexAm='true' :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`"></nut-noticebar>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const horseLamp2 = ref(['NoticeBar', 'Cascader', 'DatePicker', 'CheckBox']);
+      return { horseLamp2 };
+    }
+  }
+</script>
+```
+
+:::
+
+### Vertical Scroll Custom Style
+
+:::demo
+
+```html
+<template>
+    <nut-noticebar direction='vertical' :height='50' :speed='10' :standTime='1000' :list="[]"  @close='go' :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
+      <div class="custom-item" :data-index='index' v-for="(item,index) in horseLamp3" :key="index">{{item}}</div>
+    </nut-noticebar>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const horseLamp3 = ref(['NoticeBar', 'Cascader', 'DatePicker', 'CheckBox']);
+      return { horseLamp3 };
+    }
+  }
+</script>
+```
+
+:::
+
+### Vertical Scroll Custom Right Icon
+
+:::demo
+
+```html
+<template>
+    <nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
+      <template v-slot:rightIcon>
+        <nut-icon type="trolley" color="#f0250f"></nut-icon>
+      </template>
+    </nut-noticebar>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  export default {
+    setup(props) {
+      const horseLamp1 = ref(['NoticeBar', 'Cascader', 'DatePicker', 'CheckBox']);
+      return { horseLamp1 };
+    }
+  }
+</script>
+```
+
+:::
+
+### Prop
+
+| Attribute  | Description                                        | Type          | Default |
+| ---------- | ---------------------------------------------------| ------------- | ------- |
+| direction  | Rolling direction                                  | String        | across  |
+| text       | Notice text content                                | String        |  -      |
+| closeMode  | Whether to enable the off mode                     | Boolean       | false   |
+| leftIcon   | Left Icon                                          | String        | -       |
+| rightIcon  | Right Icon                                         | String        | -       |
+| color      | Text Color                                         | String        | -       |
+| background | Background                                         | String        | -       |
+| delay      | Delay time                                         | String/Number | 1       |
+| scrollable | Whether to scroll content                          | Boolean       | true    |
+| speed      | Scrolling speed (px/s)                             | Number         | 50      |
+| wrapable   | Whether to enable text wrap                        | Boolean       | false    |
+
+### Prop（direction=vertical）
+
+| Attribute    | Description                             | Type     | Default          |
+|--------------|-----------------------------------------|----------|------------------|
+| list         | List                                    | Array    | []               |
+| speed        | Scrolling speed                         | Number   | 50               |
+| standTime    | Show time(millisecond)                  | Number   | 1000             |
+| complexAm    | Complex animation                       | Boolean  | false            |
+| height       | height                                  | Number   | 40               |
+| closeMode    | Whether to enable the off mode          | Boolean  | false            |
+
+### Slots
+
+| Attribute         | Description                      |
+|-------------------|----------------------------------|
+| default           | Notice text content              |
+| right-icon        | Custom right icon                |
+| left-icon         | Custom left icon                 |
+
+### Event
+
+| Attribute  | Description                             | Arguments     |
+| ---------- | --------------------------------------- | ------------ |
+| click      | Emitted when NoticeBar is clicked       | event: Event |
+| close      | Emitted when NoticeBar is closed        | event: Event |

src/packages/__VUE/noticebar/doc.md

@@ -29,7 +29,7 @@ app.use(NoticeBar);
 ```html
 <template>
   <nut-noticebar
-      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
+      text="NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
       :background="`rgba(251, 248, 220, 1)`"
       :color="`#D9500B`"
     ></nut-noticebar>
@@ -49,7 +49,7 @@ app.use(NoticeBar);
   <nut-noticebar text="华为畅享9新品即将上市" :scrollable="true" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`"></nut-noticebar>
 
   <nut-noticebar
-      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
+      text="NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
       :scrollable="false"
       :background="`rgba(251, 248, 220, 1)`"
       :color="`#D9500B`"
@@ -67,7 +67,7 @@ app.use(NoticeBar);
 ```html
 <template>
   <nut-noticebar :closeMode="true" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
-    华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
+    NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。
   </nut-noticebar>
  
   <nut-noticebar
@@ -76,7 +76,7 @@ app.use(NoticeBar);
       :background="`rgba(251, 248, 220, 1)`"
       :color="`#D9500B`"
       >
-      华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！
+      NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。
   </nut-noticebar>
 </template>
 
@@ -107,7 +107,7 @@ app.use(NoticeBar);
 ```html
 <template>
   <nut-noticebar
-      text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
+      text="NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
       wrapable
       :background="`rgba(251, 248, 220, 1)`"
       :color="`#D9500B`"
@@ -136,7 +136,7 @@ app.use(NoticeBar);
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const horseLamp1 = ref(['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆']);
+      const horseLamp1 = ref(['NoticeBar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
       const go = (item) => {
         console.log(item)
       }
@@ -160,7 +160,7 @@ app.use(NoticeBar);
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const horseLamp2 = ref(['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆']);
+      const horseLamp2 = ref(['NoticeBar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
       return { horseLamp2 };
     }
   }
@@ -182,7 +182,7 @@ app.use(NoticeBar);
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const horseLamp3 = ref(['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆']);
+      const horseLamp3 = ref(['NoticeBar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
       return { horseLamp3 };
     }
   }
@@ -206,7 +206,7 @@ app.use(NoticeBar);
   import { ref } from 'vue';
   export default {
     setup(props) {
-      const horseLamp1 = ref(['惊喜红包免费领', '爆款准点秒', '买超值优惠', '赢百万京豆']);
+      const horseLamp1 = ref(['NoticeBar 公告栏', 'Cascader 级联选择', 'DatePicker 日期选择器', 'CheckBox 复选按钮']);
       return { horseLamp1 };
     }
   }
@@ -229,6 +229,7 @@ app.use(NoticeBar);
 | delay      | 延时多少秒                                                 | String/Number | 1      |
 | scrollable | 是否可以滚动                                               | Boolean       | true   |
 | speed      | 滚动速率 (px/s)                                            | Number        | 50     |
+| wrapable   | 是否开启文本换行                                           | Boolean       | false    |
 
 ### Prop（direction=vertical）
 

src/packages/locale/index.ts

@@ -10,7 +10,7 @@ const langs = reactive<Lang>({
   'en-US': new EnUSLang()
 });
 export class Locale {
-  static currentLang = ref('zh-CN');
+  static currentLang = ref('en-US');
   static languages(): Lang {
     return langs[this.currentLang.value];
   }

src/packages/locale/lang/baseLang.ts

@@ -78,5 +78,10 @@ export abstract class BaseLang {
     additionalReview: Function;
     additionalImages: Function;
   };
+  abstract infiniteloading: {
+    loading: string;
+    pullTxt: string;
+    loadMoreTxt: string;
+  };
 }
 export default BaseLang;

src/packages/locale/lang/en-US.ts

@@ -79,5 +79,10 @@ class Lang extends BaseLang {
     additionalReview: (day: number) => `Review after ${day} days of purchase`,
     additionalImages: (length: number) => `There are ${length} follow-up comments`
   };
+  infiniteloading = {
+    loading: 'Loading...',
+    pullTxt: 'Loose to refresh',
+    loadMoreTxt: 'Oops, this is the bottom'
+  };
 }
 export default Lang;

src/packages/locale/lang/zh-CN.ts

@@ -79,5 +79,10 @@ class Lang extends BaseLang {
     additionalReview: (day: number) => `购买${day}天后追评`,
     additionalImages: (length: number) => `${length}张追评图片`
   };
+  infiniteloading = {
+    loading: '加载中...',
+    pullTxt: '松开刷新',
+    loadMoreTxt: '哎呀，这里是底部了啦'
+  };
 }
 export default Lang;

src/packages/locale/lang/zh-TW.ts

@@ -79,5 +79,10 @@ class Lang extends BaseLang {
     additionalReview: (day: number) => `購買${day}天後追評`,
     additionalImages: (length: number) => `${length}張追評圖片`
   };
+  infiniteloading = {
+    loading: '加載中...',
+    pullTxt: '鬆開刷新',
+    loadMoreTxt: '哎呀，這裡是底部了啦'
+  };
 }
 export default Lang;