Browse Source

feat: 左滑删除增加禁用属性

yewenwen 5 years ago
parent
commit
54b09e0ca4

+ 22 - 1
src/packages/leftslip/demo.vue

@@ -58,6 +58,14 @@
         >
       </nut-leftslip>
     </div>
+    <p>禁止滑动</p>
+    <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>
   </div>
 </template>
 
@@ -77,7 +85,8 @@ export default {
         { id: 'add8', addr: '北京市大兴区亦庄经济开发中心京东大厦B座8', tel: '159****8888' }
       ],
       rightWidth: 80,
-      pageWidth: null
+      pageWidth: null,
+      isDisable: false
     };
   },
   methods: {
@@ -90,6 +99,9 @@ export default {
     },
     oneDel(par) {
       par.remove();
+    },
+    disabledHandle(){
+      this.isDisable = !this.isDisable 
     }
   },
   mounted() {
@@ -164,4 +176,13 @@ export default {
     }
   }
 }
+.btn{
+  margin: 10px 0;
+  background: #fff;
+  border: 1px solid #ff5722;
+  color: #ff5722;
+  outline: none;
+  border-radius: 4px;
+  padding: 5px;
+}
 </style>

+ 20 - 0
src/packages/leftslip/doc.md

@@ -116,6 +116,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
 
 | 字段           | 说明                 | 类型    | 默认值 |
@@ -128,5 +147,6 @@ export default {
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | rightWidth | 右侧按钮区域超出一行时的默认宽度,默认占整个宽度的80% | Number | 0.8
+|  disabled  | 禁止滑动操作 | Boolean | false
 
 

+ 8 - 2
src/packages/leftslip/leftslip.vue

@@ -24,6 +24,10 @@ export default {
     rightWidth: {
       type: [Number, String],
       default: '0.8'
+    },
+    disabled:{
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -87,6 +91,7 @@ export default {
       });
     },
     touchStart(e) {
+      if(this.disabled) return false
       let parentElement = e.currentTarget.parentElement;
       let slip = [];
       slip = document.getElementsByClassName('leftslip-open');
@@ -104,13 +109,13 @@ export default {
     },
 
     touchMove(e) {
+      if(this.disabled) return false
       let parentElement = e.currentTarget.parentElement;
 
       let disX = e.touches[0].pageX - this.startX; // >0 右滑,<0 左滑
       let disY = e.touches[0].pageY - this.startY;
-
       if (e.touches.length == 1) {
-        if (Math.abs(disY) < 15) {
+        if (Math.abs(disY) < 5) {
           // console.log(disX, disY)
           if (disX > 0 || (disX > 0 && this.startLeft >= 0)) {
             //禁止右滑
@@ -122,6 +127,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;

+ 1 - 1
src/packages/video/demo.vue

@@ -119,7 +119,7 @@ export default {
 
 <style lang="scss" scoped>
 .nut-video {
-  height: 200px;
+  /* height: 200px; */
 }
 
 button {

+ 7 - 5
src/packages/video/video.vue

@@ -7,7 +7,8 @@
       :autoplay="options.autoplay"
       :loop="options.loop"
       :poster="options.poster"
-      :controls="options.controls"
+	    :controls="options.controls"
+	    :preload="options.preload"
       @error="handleError"
     >
       <source v-for="source in sources" :src="source.src" :type="source.type" :key="source.src" />
@@ -66,7 +67,8 @@ export default {
           muted: false, //是否静音
           disabled: false, //禁止操作
           playsinline: false, //行内展示
-          touchPlay: false
+          touchPlay: false,
+		      preload:''
         };
       },
       required: true
@@ -136,7 +138,7 @@ export default {
         this.state.isMuted = val.muted ? val.muted : false;
       },
       immediate: true
-    }
+    },
     // model: {
     //     handler(val) {
     //         if (val) {
@@ -160,7 +162,7 @@ export default {
     init() {
       this.videoElm = this.$el.getElementsByTagName('video')[0];
       if (this.options.autoplay) {
-        this.play();
+        this.videoElm.play();
       }
 
       if (this.options.touchPlay) {
@@ -197,7 +199,7 @@ export default {
       // 播放器位置
       this.player.$player = $player;
       this.progressBar.progressElm = $progress;
-      this.player.pos = $player.getBoundingClientRect();
+      // this.player.pos = $player.getBoundingClientRect();
       this.progressBar.pos = $progress.getBoundingClientRect();
       this.videoSet.progress.width = Math.round($progress.getBoundingClientRect().width);
     },