feat: leftslip

src/packages/leftslip/doc.md

@@ -58,40 +58,42 @@ export default {
 ```
 
 
-### 列表
+### 消息列表
 
 ```html
-<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 class="cell-box">
+    <nut-leftslip v-for="(item, index) in list" :key="item.id" ref="leftslip">
+        <div slot="slip-main" class="slip-main">
+          <nut-cell class="cell-item" :title="item.title" :sub-title="item.subTitle">
+            <div slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></div>
+            <div slot="desc">
+              <p class="timer">{{item.time}}</p>
+              <p class="badge"><nut-badge :is-dot="item.isDot" :value="item.value" :max="99" top="0px" right="15px"></nut-badge></p>
+            </div>
+          </nut-cell>
         </div>
         <div slot="slipbtns" class="slipbtns"
-          ><a href="javascript:;" @click="delItem(index)">删除</a></div
-        >
+          ><a href="javascript:;" @click="delItem(index)">删除</a>
+        </div>
     </nut-leftslip>
 </div>
 ```
 
 ```javascript
+import Icon from '../icon/icon.vue';
+import Avatar from '../avatar/avatar.vue';
+import Badge from '../badge/badge.vue'
+
 export default {
     components: {},
     data() {
         return {
             list: [
-                {id: 'add1', addr: '北京市大兴区亦庄经济开发中心京东大厦B座1', tel: '159****8888'},
-                {id: 'add2', addr: '北京市大兴区亦庄经济开发中心京东大厦B座2', tel: '159****8888'},
-                {id: 'add3', addr: '北京市大兴区亦庄经济开发中心京东大厦B座3', tel: '159****8888'},
-                {id: 'add4', addr: '北京市大兴区亦庄经济开发中心京东大厦B座4', tel: '159****8888'},
-                {id: 'add5', addr: '北京市大兴区亦庄经济开发中心京东大厦B座5', tel: '159****8888'},
-                {id: 'add6', addr: '北京市大兴区亦庄经济开发中心京东大厦B座6', tel: '159****8888'},
-                {id: 'add7', addr: '北京市大兴区亦庄经济开发中心京东大厦B座7', tel: '159****8888'},
-                {id: 'add8', addr: '北京市大兴区亦庄经济开发中心京东大厦B座8', tel: '159****8888'}
-            ]
+                { id: 'add1', title: '噜啦噜1',subTitle:'我又来送福利啦！关注之后你就会',time:'10:13',isDot:false,value:9},
+                { id: 'add2', title: '噜啦噜2',subTitle:'我又来送福利啦！关注之后你就会',time:'10:12',isDot:true,value:1},
+                { id: 'add5', title: '噜啦噜5',subTitle:'我又来送福利啦！关注之后你就会',time:'1小时前',isDot:false,value:99},
+                { id: 'add8', title: '噜啦噜8',subTitle:'我又来送福利啦！关注之后你就会',time:'星期五' ,isDot:false,value:100}
+            ],
         };
     },
     methods: {
@@ -102,6 +104,25 @@ export default {
 };
 ```
 
+###  禁止滑动
+```html
+<div>
+    <button class="btn" @click="disabledHandle">{{isDisable ? '开启滑动' : '禁止滑动'}}</button>
+    <nut-leftslip :disabled="isDisable">
+        <div slot="slip-main" class="slip-main">左滑触发删除</div>
+        <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>
+    </nut-leftslip>
+</div>
+```
+
+```javascript
+    disabledHandle(){
+        this.isDisable = !this.isDisable 
+    }
+
+```
+
+
 ## slot
 
 | 字段           | 说明                 | 类型    | 默认值 |
@@ -114,5 +135,6 @@ export default {
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | rightWidth | 右侧按钮区域超出一行时的默认宽度，默认占整个宽度的80% | Number | 0.8
+|  disabled  | 禁止滑动操作 | Boolean | false
 
 

src/packages/leftslip/leftslip.vue

@@ -24,6 +24,10 @@ export default {
     rightWidth: {
       type: [Number, String],
       default: '0.8'
+    },
+    disabled:{
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -75,6 +79,7 @@ export default {
     //   });
     // },
     touchStart(e) {
+      if(this.disabled) return false
       let parentElement = e.currentTarget.parentElement;
       let slip = [];
       slip = document.getElementsByClassName('leftslip-open');
@@ -92,6 +97,7 @@ export default {
     },
 
     touchMove(e) {
+      if(this.disabled) return false
       let parentElement = e.currentTarget.parentElement;
 
       let disX = e.touches[0].pageX - this.startX; // >0 右滑，<0 左滑
@@ -109,6 +115,7 @@ export default {
       }
     },
     touchEnd(e) {
+      if(this.disabled) return false
       let parentElement = e.currentTarget.parentElement;
       const disX = e.changedTouches[0].pageX - this.startX; // >0 右滑，<0 左滑
       let distance;