Merge branch 'v2-dev' of https://github.com/jdf2e/nutui into v2-dev

CHANGELOG.md

@@ -1,3 +1,18 @@
+## 2.2.12
+
+`2020-11-10`
+
+* :sparkles: feat(leftSlip)：支持用户通过 api 侧滑关闭单元格 @richard1015
+* :sparkles: feat(slider)：新增 change 事件，支持用户自定义监听 @richard1015
+* :sparkles: feat(infiniteloading)：新增 container-id 字段，支持自定义滚动容器  @shenqistart
+* :sparkles: feat(uploader)：新增 multiple 字段，支持单选多选功能 @richard1015
+* :sparkles: feat(infiniteloading)：新增 isShowBottomTips 字段，支持用户自定义控制底部加载提示 @richard1015
+* :sparkles: upd(collapse)：优化依赖组件引用方式 @Ymm0008
+* :bug: fix(countup)：修复组件异步更新问题 @Ymm0008
+* :bug: fix(address)：修复组件快速点击，popup 层无法展开问题 @yangxiaolu1993
+* :bug: fix(toast)：修复文档 bottom 类型和默认值 @zy19940510
+* :bug: fix(toast)：修复loading方法无法同步关闭问题 @richard1015
+
 ## 2.2.11
 
 `2020-09-27`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "2.2.11",
+  "version": "2.2.12",
   "description": "一套轻量级移动端Vue组件库",
   "typings": "dist/types/index.d.ts",
   "main": "dist/nutui.js",

src/packages/dialog/doc.md

@@ -142,7 +142,6 @@ export default {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-
 | onOkBtn | 确定按钮回调 | Function | -
 | onCancelBtn | 取消按钮回调 | Function | -
 | onCloseBtn | 关闭按钮回调 | Function | -

src/packages/infiniteloading/doc.md

@@ -61,6 +61,7 @@ export default {
 | is-loading | 是否加载中 | Boolean | false
 | threshold | 距离底部多远加载 | Number | 200
 | is-showMod | 是否展示懒加载模块内容，一般适用于选项卡切换 | Boolean | false
+| is-show-bottom-tips | 是否展示底部加载提示 | Boolean | true
 | use-window | 将滚动侦听器添加到 window 否则侦听组件的父节点 | Boolean | true
 | use-capture | 是否使用捕获模式 true捕获 false冒泡 | Boolean | false
 | unload-more-txt | 没有更多数据展示文案 | String | 哎呀，这里是底部了啦' 

src/packages/infiniteloading/infiniteloading.vue

@@ -2,7 +2,7 @@
   <div class="nut-infiniteloading" ref="scroller" @touchstart="touchStartHandle($event)" @touchmove="touchMoveHandle($event)">
     <slot></slot>
     <div class="load-more">
-      <div class="bottom-tips">
+      <div class="bottom-tips" v-if="isShowBottomTips">
         <template v-if="isLoading"> <i class="loading-hint"></i><span class="loading-txt">加载中...</span> </template>
         <span v-else-if="!hasMore" class="tips-txt">{{ unloadMoreTxt }}</span>
       </div>
@@ -37,6 +37,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isShowBottomTips: {
+      type: Boolean,
+      default: true,
+    },
     unloadMoreTxt: {
       type: String,
       default: '哎呀，这里是底部了啦',

src/packages/leftslip/demo.vue

@@ -8,8 +8,9 @@
           ><a href="javascript:;" @click="delSlipItem">删除</a><a href="javascript:;" class="favorite">收藏</a></div
         >
       </nut-leftslip>
+      <nut-button @click="changeState">{{ state ? '异步关闭' : '异步打开' }}</nut-button>
     </div>
-    <p>单个按钮</p>
+    <h4>单个按钮</h4>
     <div>
       <nut-leftslip>
         <div slot="slip-main" class="slip-main">自定义单一按钮</div>
@@ -22,7 +23,7 @@
                 <div slot="slip-main" class="slip-main">向左滑滑滑~一键删除</div>
             </nut-leftslip> -->
     </div>
-    <p>多个按钮</p>
+    <h4>多个按钮</h4>
     <p>如果超出一行宽度，默认右侧按钮区域占一行的80%，此处设置60%</p>
     <div>
       <nut-leftslip :rightWidth="0.6">
@@ -43,7 +44,7 @@
         </div>
       </nut-leftslip>
     </div>
-    <p>列表</p>
+    <h4>列表</h4>
     <div>
       <nut-leftslip v-for="(item, index) in list" :key="item.id" ref="leftslip">
         <div slot="slip-main" class="slip-main">
@@ -58,14 +59,13 @@
         >
       </nut-leftslip>
     </div>
-    <div class="demo-list-pd">
-      <button class="btn" @click="disabledHandle">{{ isDisable ? '开启滑动' : '禁止滑动' }}</button>
-    </div>
+    <h4>控制滑动</h4>
     <div>
       <nut-leftslip :disabled="isDisable">
         <div slot="slip-main" class="slip-main">左滑触发删除</div>
         <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>
       </nut-leftslip>
+      <nut-button @click="disabledHandle">{{ isDisable ? '开启滑动' : '禁止滑动' }}</nut-button>
     </div>
   </div>
 </template>
@@ -87,14 +87,22 @@ export default {
       ],
       rightWidth: 80,
       pageWidth: null,
-      isDisable: false
+      isDisable: false,
+      state: false
     };
   },
   methods: {
     delSlipItem(e) {
-      alert('确定删除吗？');
       this.$refs.demo1.sliderEle.remove();
     },
+    changeState() {
+      if (this.state) {
+        this.$refs.demo1.restSlide();
+      } else {
+        this.$refs.demo1.openSlide();
+      }
+      this.state = !this.state;
+    },
     delItem(index) {
       this.list.splice(index, 1);
     },
@@ -177,13 +185,4 @@ export default {
     }
   }
 }
-.btn {
-  margin: 10px 0;
-  background: #fff;
-  border: 1px solid #ff5722;
-  color: #ff5722;
-  outline: none;
-  border-radius: 4px;
-  padding: 5px;
-}
 </style>

src/packages/leftslip/doc.md

@@ -10,14 +10,27 @@
         <div slot="slip-main" class="slip-main">向左滑动我</div>
         <div slot="slipbtns" class="slipbtns"><a href="javascript:;" @click="delSlipItem">删除</a><a href="javascript:;" class="favorite">收藏</a></div>
     </nut-leftslip>
+    <nut-button @click="changeState">{ { state ? '异步关闭' : '异步打开' }}</nut-button>
 </div>
 ```
 ```javascript
 export default {
+    data(){
+        return {
+            state:false
+        };
+    },
     methods: {
         delSlipItem(e) {
-            alert('确定删除吗？')
-            this.$refs.demo1.sliderEle.remove()
+            this.$refs.demo1.sliderEle.remove();
+        },
+        changeState() {
+            if (this.state) {
+                this.$refs.demo1.restSlide();
+            } else {
+                this.$refs.demo1.openSlide();
+            }
+            this.state = !this.state;
         }
     }
 };
@@ -137,16 +150,26 @@ export default {
 
 ## slot
 
-| 字段           | 说明                 | 类型    | 默认值 |
-| -------------- | -------------------- | ------- | ------ |
-| slip-main | 列表主内容自定义区域 | html    | -      |
-| slipbtns  | 左滑按钮自定义区域   | html    | -      |
+| 字段      | 说明                 | 类型 | 默认值 |
+|-----------|----------------------|------|--------|
+| slip-main | 列表主内容自定义区域 | html | -      |
+| slipbtns  | 左滑按钮自定义区域   | html | -      |
 
 ## Prop
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| rightWidth | 右侧按钮区域超出一行时的默认宽度，默认占整个宽度的80% | Number | 0.8
-|  disabled  | 禁止滑动操作 | Boolean | false
+| 字段       | 说明                                                  | 类型    | 默认值 |
+|------------|-------------------------------------------------------|---------|--------|
+| right-width | 右侧按钮区域超出一行时的默认宽度，默认占整个宽度的80% | Number  | 0.8    |
+| disabled   | 禁止滑动操作                                          | Boolean | false  |
+
+## Methods
+
+#### 通过 ref 可以获取到 LeftSlip 组件实例并调用实例方法
+
+
+| 方法名    | 说明             | 参数 | 返回值 |
+|-----------|------------------|------|--------|
+| restSlide | 关闭单元格侧边栏 | -    | -      |
+| openSlide | 打开单元格侧边栏 | -    | -      |
 
 

src/packages/leftslip/leftslip.vue

@@ -152,7 +152,11 @@ export default {
         this.doSlide(-distance, true);
       }
     },
-
+    openSlide() {
+      this.isOpen = true;
+      const distance = this.buttonWidth > this.pageWidth ? this.pageWidth * Number(this.rightWidth) : this.buttonWidth;
+      this.doSlide(-distance, true);
+    },
     doSlide(distance, animate = false) {
       this.sliderEle.style.transform = `translateX(${distance}px)`;
       this.$refs.right.style.width = -distance + 'px';

src/packages/toast/_toast.js

@@ -33,9 +33,9 @@ let currentOptions = {
 function _showToast() {
   instance.vm = instance.$mount();
   document.body.appendChild(instance.$el);
-  Vue.nextTick(() => {
-    instance.visible = true;
-  });
+  // Vue.nextTick(() => {
+  instance.visible = true;
+  // });
 }
 
 function _getInstance(obj) {