update leftslip 修改样式、左滑不灵敏问题

src/packages/leftslip/demo.vue

@@ -15,12 +15,7 @@
                 <div slot="slip-main" class="slip-main">自定义单一按钮</div>
                 <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>
             </nut-leftslip>
-            <nut-leftslip onlyDelBtn @oneDelete="oneDel">
-                <div slot="slip-main" class="slip-main">单一按钮点击一键删除</div>
-            </nut-leftslip>
-            <!-- <nut-leftslip onlyDelBtn @oneDelete="oneDel" ref="leftslip1">
-                <div slot="slip-main" class="slip-main">向左滑滑滑~一键删除</div>
-            </nut-leftslip> -->
+            
         </div>
         <p>多个按钮</p>
         <div>
@@ -73,6 +68,9 @@ export default {
             ]
         };
     },
+    mounted(){
+        // alert(123)
+    },
     methods: {
         delSlipItem(e) {
             console.log(e.target);
@@ -80,9 +78,6 @@ export default {
         delItem(index) {
             this.list.splice(index, 1);
         },
-        oneDel(par) {
-            par.remove();
-        }
     }
 };
 </script>
@@ -99,7 +94,7 @@ export default {
         box-sizing: border-box;
         transform: scale(0.5);
         transform-origin: left bottom;
-        border-bottom: 1px solid #ececee;
+        // border-bottom: 1px solid #ececee;
     }
     .addr-wrap {
         display: flex;

src/packages/leftslip/doc.md

@@ -24,21 +24,6 @@
 </div>
 ```
 
-### 单个按钮一键删除
-
-```html
-<nut-leftslip onlyDelBtn @oneDelete="oneDel">
-    <div slot="slip-main" class="slip-main">单一按钮点击一键删除</div>
-</nut-leftslip>
-```
-
-```javascript
-export default {
-    oneDel(par) {
-        par.remove();
-    }
-};
-```
 
 ### 多个按钮
 
@@ -110,10 +95,4 @@ export default {
 | -------------- | -------------------- | ------- | ------ |
 | slot:slip-main | 列表主内容自定义区域 | html    | -      |
 | slot:slipbtns  | 左滑按钮自定义区域   | html    | -      |
-| onlyDelBtn     | 设置单一删除按钮     | Boolean | false  |
-
-## Event
 
-| 字段      | 说明                       | 回调参数 |
-| --------- | -------------------------- | -------- |
-| oneDelete | 单一删除按钮模式下删除事件 | 无       |

src/packages/leftslip/leftslip.scss

@@ -2,14 +2,16 @@
     position: relative;
     overflow: hidden;
     &:first-child .nut-slip-main {
-        border-top: 1px solid #d8d8d8;
+        border-top: 1px solid #efefef;
     }
     .slip-main {
         padding: 10px;
+        min-height: 40px;
+        line-height: 40px;
         position: relative;
         overflow: hidden;
         display: flex;
-        border-bottom: 1px solid #d8d8d8;
+        border-bottom: 1px solid #efefef;
         background: #fff;
     }
     .nut-leftslip-item {
@@ -40,7 +42,7 @@
             height: 100%;
         }
     }
-    .nut-delet-btn{
+    .nut-delet-btn {
         position: absolute;
         right: -50px;
         top: 0;

src/packages/leftslip/leftslip.vue

@@ -4,7 +4,7 @@
             <div
                 class="nut-leftslip-item-main"
                 @touchstart="touchStart($event)"
-                @touchmove.stop.prevent="touchMove($event)"
+                @touchmove="touchMove($event)"
                 @touchend="touchEnd($event)"
             >
                 <slot name="slip-main"></slot>
@@ -15,7 +15,6 @@
                 <span @click.prevent="onlyDelClick($event)">删除</span></div
             > -->
             <div class="nut-leftslip-item-btn">
-                <!-- <a @click.prevent="onlyDelClick($event)">删除</a> -->
                 <slot name="slipbtns">
                     <a class="nut-delet-btn" @click.prevent="onlyDelClick($event)" v-if="onlyDelBtn">删除</a>
                 </slot>
@@ -44,8 +43,8 @@ export default {
             moveY: 0,
             left: 0,
             buttonWidth: 0,
-            disX: 0, //移动距离
-            deleteSlider: '', //滑动时的效果,使用v-bind:style="deleteSlider"
+            offset: 0, //移动距离
+            deleteSlider: '', //滑动时的效果
             delBtnStyle: '' //单个删除键拖拽删除效果
         };
     },
@@ -67,7 +66,7 @@ export default {
     },
     methods: {
         handleScroll() {
-            if (this.disX) {
+            if (this.offset) {
                 this.restSlide();
             }
         },
@@ -82,6 +81,7 @@ export default {
         touchStart(e) {
             this.restSlide();
             e = e || event;
+            e.preventDefault();
             //等于1时表示此时有只有一只手指在触摸屏幕
             if (e.touches.length == 1) {
                 this.startX = e.touches[0].clientX;
@@ -90,39 +90,39 @@ export default {
         },
         touchMove(e) {
             e = e || event;
+            // e.preventDefault();
             //获取当前滑动对象
             let parentElement = e.currentTarget.parentElement;
-            //获取删除按钮的宽度，此宽度为滑块左滑的最大距离
+
             let itemWd = this.$refs.slipItem.offsetWidth;
             let wd = this.onlyDelBtn ? 40 : this.buttonWidth;
 
             if (e.touches.length == 1) {
-                // 滑动时距离浏览器左侧实时距离
                 this.moveY = e.touches[0].clientY;
                 this.moveX = e.touches[0].clientX;
+              
                 if (Math.abs(this.moveY - this.startY) < 40) {
-                    //起始位置减去 实时的滑动的距离，得到手指实时偏移距离
-                    this.disX = this.startX - this.moveX;
-                    // console.log(this.disX);
+                   
+                    this.offset = this.startX - this.moveX;
+                   
                     if (this.onlyDelBtn) {
                         //单一删除，左滑一键删除
-                        if (this.disX < 0 || this.disX == 0) {
+                        if (this.offset < 0 || this.offset == 0) {
                             this.deleteSlider = 'transform:translateX(0px)';
                         }
-                        this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
-                        this.delBtnStyle = 'width:' + this.disX + 'px';
+                        this.deleteSlider = 'transform:translateX(-' + this.offset + 'px)';
+                        this.delBtnStyle = 'width:' + this.offset + 'px';
                         parentElement.dataset.type = 1; //设置滑动展开隐藏标志位，左滑展开为1，右滑或复位为0
                     } else {
-                        // 如果是向右滑动或者不滑动，不改变滑块的位置
-                        if (this.disX < wd / 4 || this.disX == 0) {
+                        
+                        if (this.offset < wd / 4 || this.offset == 0) {
                             this.deleteSlider = 'transform:translateX(0px)';
                             parentElement.dataset.type = 0;
-                        } else if (this.disX > wd / 4) {
+                        } else if (this.offset > wd / 4) {
                             parentElement.dataset.type = 1;
-                            this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
+                            this.deleteSlider = 'transform:translateX(-' + this.offset + 'px)';
                             // 最大也只能等于删除按钮宽度
-                            if (this.disX * 1.5 >= wd) {
-                                // parentElement.dataset.type = 1;
+                            if (this.offset * 1.5 >= wd) {
                                 if (wd >= itemWd) {
                                     this.deleteSlider = 'transform:translateX(-' + (itemWd - 40) + 'px)';
                                 } else {
@@ -139,18 +139,19 @@ export default {
             let parentElement = e.currentTarget.parentElement;
             let itemWd = this.$refs.slipItem.offsetWidth;
             let wd = this.onlyDelBtn ? 40 : this.buttonWidth;
+
             if (e.changedTouches.length == 1) {
                 let endY = e.changedTouches[0].clientY;
                 if (Math.abs(this.startY - endY) < 40) {
                     let endX = e.changedTouches[0].clientX;
-                    this.disX = this.startX - endX;
-                    // console.log('touchEndthis.disX:', this.disX);
+                    this.offset = this.startX - endX;
+
                     if (this.onlyDelBtn) {
                         //单一按钮，左滑一键删除
-                        if (this.disX < 0 || this.disX == 0) {
+                        if (this.offset < 0 || this.offset == 0) {
                             this.deleteSlider = 'transform:translateX(0px)';
                             parentElement.dataset.type = 0;
-                        } else if (this.disX < itemWd - 20) {
+                        } else if (this.offset < itemWd - 20) {
                             parentElement.dataset.type = 1;
                             this.deleteSlider = 'transform:translateX(-50px);';
                             this.delBtnStyle = ' width:0px;';
@@ -161,9 +162,7 @@ export default {
                             this.onlyDelClick();
                         }
                     } else {
-                        //如果距离小于删除按钮的四分之一,强行回到起点
-
-                        if (this.disX < wd / 4) {
+                        if (this.offset < wd / 4) {
                             parentElement.dataset.type = 0;
                             this.deleteSlider = 'transform:translateX(0px)';
                         } else {
@@ -177,8 +176,6 @@ export default {
                             }
                         }
                     }
-
-                    // console.log('touchEnd:dataset', parentElement.dataset.type);
                 }
             }
         },