feat: 左滑删除组件

src/packages/leftslip/demo.vue

@@ -10,7 +10,7 @@
       </nut-leftslip>
     </div>
     
-    <h4>多个按钮样式</h4>
+    <h4>多个按钮</h4>
     <p>如果超出一行宽度，默认右侧按钮区域占一行的80%</p>
     <div>
       <nut-leftslip :rightWidth="0.8">

src/packages/leftslip/doc.md

@@ -6,9 +6,11 @@
 
 ```html
 <div>
-    <nut-leftslip ref='demo1'>
-        <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 ref="demo1">
+        <div slot="slip-main" class="slip-main base-style">左滑触发删除<span class="main-right">这里是内容</span></div>
+        <div slot="slipbtns" class="slipbtns"
+          ><a href="javascript:;" @click="delSlipItem">删除</a></div
+        >
     </nut-leftslip>
 </div>
 ```
@@ -23,69 +25,53 @@ export default {
 };
 ```
 
-### 单个按钮
+
+### 多个按钮
+
+>如果超出一行宽度，默认右侧按钮区域占一行的80%
 
 ```html
 <div>
-    <nut-leftslip>
-        <div slot="slip-main" class="slip-main">自定义单一按钮</div>
-        <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>
+    <nut-leftslip :rightWidth="0.8">
+        <div slot="slip-main" class="slip-main">左滑触发删除<span class="main-right">这里是内容</span></div>
+        <div slot="slipbtns" class="slipbtns"
+            ><a href="javascript:;">删除</a>
+            <a href="javascript:;" class="favorite org3">确认</a>
+            <a href="javascript:;" class="favorite">收藏</a>
+        </div>
     </nut-leftslip>
 </div>
 ```
 
-<!-- ### 单个按钮一键删除
-
-```html
-<nut-leftslip onlyDelBtn @oneDelete="oneDel">
-    <div slot="slip-main" class="slip-main">单一按钮点击一键删除</div>
-</nut-leftslip>
-```
-
-```javascript
-export default {
-    oneDel(par) {
-        par.remove();
-    }
-};
-``` -->
-
-### 多个按钮
 
->如果超出一行宽度，默认右侧按钮区域占一行的80%，此处设置了60%
+### 自定义ICON
 
 ```html
 <div>
-    <nut-leftslip :rightWidth="0.6">
-        <div slot="slip-main" class="slip-main">向左滑动，多个按钮有超出限制哦~</div>
-        <div slot="slipbtns" class="slipbtns"
-            ><a href="javascript:;">删除</a>
-            <a href="javascript:;" class="favorite">收藏</a>
-            <a href="javascript:;" class="favorite org1"><nut-icon type="trolley" size="20px" color="#fff"></nut-icon></a>
-            <a href="javascript:;" class="favorite org2"><nut-icon type="cross" size="15px" color="#fff"></nut-icon></a>
-            <a href="javascript:;" class="favorite org3">确认</a>
-            <a href="javascript:;" class="favorite org1">加购物车</a>
-            <a href="javascript:;" class="favorite">收藏2</a>
-            <a href="javascript:;" class="favorite">收藏3</a>
+    <nut-leftslip>
+        <div slot="slip-main" class="slip-main">左滑触发删除<span class="main-right">这里是内容</span></div>
+        <div slot="slipbtns" class="slipbtns">
+            <a href="javascript:;"><nut-icon type="trolley" size="20px" color="#fff"></nut-icon></a>
         </div>
     </nut-leftslip>
 </div>
 ```
 
+
 ### 列表
 
 ```html
-<div>
-    <nut-leftslip v-for="(item, index) in list" :key="item.id" ref="leftslip">
-        <div slot="slip-main" class="slip-main">
-            <div class="addr">
-                <p class="name-mobile">159****8888</p>
-                <p class="full-addr">北京市大兴区亦庄经济开发中心京东大厦B座1</p>
-            </div>
-            <a class="addr-edit" href="javascript:void(0)"></a>
+<div class="address-list">
+    <nut-leftslip v-for="(item, index) in list" :key="item.id" ref="leftslip" class="addr-item" >
+        <div slot="slip-main" class="slip-main addr-main">
+          <div class="addr">
+            <p class="name-mobile">{{ item.tel }}</p>
+            <p class="full-addr">{{ item.addr }}</p>
+          </div>
+          <a class="addr-edit" href="javascript:void(0)"></a>
         </div>
         <div slot="slipbtns" class="slipbtns"
-            ><a href="javascript:;" @click="delItem(index)">删除</a><a href="javascript:;" class="favorite">收藏</a></div
+          ><a href="javascript:;" @click="delItem(index)">删除</a></div
         >
     </nut-leftslip>
 </div>

src/packages/leftslip/leftslip.vue

@@ -96,7 +96,6 @@ export default {
 
       let disX = e.touches[0].pageX - this.startX; // >0 右滑，<0 左滑
       let disY = e.touches[0].pageY - this.startY;
-      console.log('btnH',this.buttonHeight,disY)
       if (e.touches.length == 1) {
         if (Math.abs(disY) < 5) {
           // console.log(disX, disY)