feat: (LeftSlip) 支持用户通过 api 侧滑关闭单元格

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';