Browse Source

feat(infiniteloading、scroller): 加载中文案 props 提取 #662 (#719)

* 优化加载中的文案

* docs: 优化可灵活配置加载中的文案
lzzwoniu 4 years ago
parent
commit
8717244d07

+ 1 - 0
src/packages/infiniteloading/doc.md

@@ -65,6 +65,7 @@ export default {
 | use-window | 将滚动侦听器添加到 window 否则侦听组件的父节点 | Boolean | true
 | use-window | 将滚动侦听器添加到 window 否则侦听组件的父节点 | Boolean | true
 | use-capture | 是否使用捕获模式 true捕获 false冒泡 | Boolean | false
 | use-capture | 是否使用捕获模式 true捕获 false冒泡 | Boolean | false
 | unload-more-txt | 没有更多数据展示文案 | String | 哎呀,这里是底部了啦' 
 | unload-more-txt | 没有更多数据展示文案 | String | 哎呀,这里是底部了啦' 
+| loading-txt | 加载中自定义文案配置 | String | 加载中...'
 | container-id | 在use-window属性为false的时候,自定义设置节点ID | String | ''
 | container-id | 在use-window属性为false的时候,自定义设置节点ID | String | ''
 
 
 ## Slot
 ## Slot

+ 5 - 1
src/packages/infiniteloading/infiniteloading.vue

@@ -4,7 +4,7 @@
     <div class="load-more">
     <div class="load-more">
       <div class="bottom-tips" v-if="isShowBottomTips">
       <div class="bottom-tips" v-if="isShowBottomTips">
         <template v-if="isLoading">
         <template v-if="isLoading">
-          <template v-if="!slotLoading"> <i class="loading-hint"></i><span class="loading-txt">加载中...</span> </template>
+          <template v-if="!slotLoading"> <i class="loading-hint"></i><span class="loading-txt">{{loadingTxt}}</span> </template>
           <slot name="loading" v-else></slot>
           <slot name="loading" v-else></slot>
         </template>
         </template>
 
 
@@ -52,6 +52,10 @@ export default {
       type: String,
       type: String,
       default: '哎呀,这里是底部了啦'
       default: '哎呀,这里是底部了啦'
     },
     },
+    loadingTxt: {
+      type: String,
+      default: '加载中...'
+    },
     scrollChange: {
     scrollChange: {
       type: Function
       type: Function
     },
     },

+ 1 - 0
src/packages/scroller/doc.md

@@ -173,6 +173,7 @@ export default {
 | threshold | 距离底部多少开始加载 | Number | 100
 | threshold | 距离底部多少开始加载 | Number | 100
 | pulldownTxt | 下拉展示文案 | String | '下拉刷新'
 | pulldownTxt | 下拉展示文案 | String | '下拉刷新'
 | loadMoreTxt | 上拉展示文案 | String | '上拉加载'
 | loadMoreTxt | 上拉展示文案 | String | '上拉加载'
+| loadingTxt | 加载中展示文案 | String | '加载中...'
 | unloadMoreTxt | 没有更多数据展示文案 | String | '没有更多了'
 | unloadMoreTxt | 没有更多数据展示文案 | String | '没有更多了'
 | scrollTo | 滚动到指定位置,只能设置负数,需要配合scrollToCbk使用 | Number | 1
 | scrollTo | 滚动到指定位置,只能设置负数,需要配合scrollToCbk使用 | Number | 1
 
 

+ 5 - 0
src/packages/scroller/scroller.vue

@@ -8,6 +8,7 @@
         :threshold="threshold"
         :threshold="threshold"
         :pulldown-txt="pulldownTxt"
         :pulldown-txt="pulldownTxt"
         :load-more-txt="loadMoreTxt"
         :load-more-txt="loadMoreTxt"
+        :loading-txt="loadingTxt"
         :unload-more-txt="unloadMoreTxt"
         :unload-more-txt="unloadMoreTxt"
         :props-time="propsTime"
         :props-time="propsTime"
         :scroll-to="scrollTo"
         :scroll-to="scrollTo"
@@ -62,6 +63,10 @@ export default {
       type: String,
       type: String,
       default: '上拉加载'
       default: '上拉加载'
     },
     },
+    loadingTxt: {
+      type: String,
+      default: '加载中...'
+    },
     unloadMoreTxt: {
     unloadMoreTxt: {
       type: String,
       type: String,
       default: '没有更多了'
       default: '没有更多了'

+ 7 - 2
src/packages/scroller/vertical-scroll.vue

@@ -5,7 +5,8 @@
         <div class="nut-vert-pulldown-txt" v-if="!isLoading">{{ pulldownTxt }}</div>
         <div class="nut-vert-pulldown-txt" v-if="!isLoading">{{ pulldownTxt }}</div>
         <div class="nut-vert-pulldown-status" v-else>
         <div class="nut-vert-pulldown-status" v-else>
           <span class="nut-vert-loading"></span>
           <span class="nut-vert-loading"></span>
-          <span class="nut-vert-loading-txt">加载中...</span>
+          <!-- <span class="nut-vert-loading-txt">加载中...</span> -->
+          <span class="nut-vert-loading-txt">{{loadingTxt}}</span>
         </div>
         </div>
       </div>
       </div>
       <slot name="list"></slot>
       <slot name="list"></slot>
@@ -14,7 +15,7 @@
           <!-- <div class="nut-vert-load-txt" >{{loadMoreTxt}}</div> -->
           <!-- <div class="nut-vert-load-txt" >{{loadMoreTxt}}</div> -->
           <div class="nut-vert-load-status" v-if="isLoading">
           <div class="nut-vert-load-status" v-if="isLoading">
             <span class="nut-vert-loading"></span>
             <span class="nut-vert-loading"></span>
-            <span class="nut-vert-loading-txt">加载中...</span>
+            <span class="nut-vert-loading-txt">{{loadingTxt}}</span>
           </div>
           </div>
         </template>
         </template>
         <template v-else-if="isUnMore">
         <template v-else-if="isUnMore">
@@ -48,6 +49,10 @@ export default {
       type: String,
       type: String,
       default: '上拉加载'
       default: '上拉加载'
     },
     },
+    loadingTxt: {
+      type: String,
+      default: '加载中...'
+    },
     unloadMoreTxt: {
     unloadMoreTxt: {
       type: String,
       type: String,
       default: '没有更多了'
       default: '没有更多了'