fix 视频组件文档优化、左滑组件滚动事件注掉

src/packages/leftslip/leftslip.vue

@@ -33,6 +33,10 @@ export default {
         btnSlipDel: {
             type: Boolean,
             default: false
+        },
+        customBtnWidth: {
+            type: Number,
+            default: 40
         }
     },
     data() {
@@ -45,7 +49,8 @@ export default {
             buttonWidth: 0,
             offset: 0, //移动距离
             deleteSlider: '', //滑动时的效果
-            delBtnStyle: '' //单个删除键拖拽删除效果
+            delBtnStyle: '', //单个删除键拖拽删除效果
+            openState: false
         };
     },
     mounted() {
@@ -58,11 +63,11 @@ export default {
             }
         });
 
-        window.addEventListener('scroll', this.handleScroll, true);
+        // window.addEventListener('scroll', this.handleScroll, true);
     },
     beforeDestroy() {
         // 移除监听
-        window.removeEventListener('scroll', this.handleScroll, true);
+        // window.removeEventListener('scroll', this.handleScroll, true);
     },
     methods: {
         handleScroll() {
@@ -79,9 +84,12 @@ export default {
             this.restSlide();
         },
         touchStart(e) {
+            // if(this.openState){
+            //     return
+            // }
             this.restSlide();
             e = e || event;
-            e.preventDefault();
+            // e.preventDefault();
             //等于1时表示此时有只有一只手指在触摸屏幕
             if (e.touches.length == 1) {
                 this.startX = e.touches[0].clientX;
@@ -95,40 +103,42 @@ export default {
             let parentElement = e.currentTarget.parentElement;
 
             let itemWd = this.$refs.slipItem.offsetWidth;
-            let wd = this.onlyDelBtn ? 40 : this.buttonWidth;
+            let wd = this.onlyDelBtn ? this.customBtnWidth : 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.offset = this.startX - this.moveX;
-                   
+
                     if (this.onlyDelBtn) {
                         //单一删除，左滑一键删除
                         if (this.offset < 0 || this.offset == 0) {
                             this.deleteSlider = 'transform:translateX(0px)';
+                            this.openState = false;
                         }
                         this.deleteSlider = 'transform:translateX(-' + this.offset + 'px)';
                         this.delBtnStyle = 'width:' + this.offset + 'px';
                         parentElement.dataset.type = 1; //设置滑动展开隐藏标志位，左滑展开为1，右滑或复位为0
+                        this.openState = true;
                     } else {
-                        
                         if (this.offset < wd / 4 || this.offset == 0) {
                             this.deleteSlider = 'transform:translateX(0px)';
                             parentElement.dataset.type = 0;
+                            this.openState = false;
                         } else if (this.offset > wd / 4) {
                             parentElement.dataset.type = 1;
                             this.deleteSlider = 'transform:translateX(-' + this.offset + 'px)';
                             // 最大也只能等于删除按钮宽度
-                            if (this.offset * 1.5 >= wd) {
+                            if (this.offset >= wd) {
                                 if (wd >= itemWd) {
-                                    this.deleteSlider = 'transform:translateX(-' + (itemWd - 40) + 'px)';
+                                    this.deleteSlider = 'transform:translateX(-' + (itemWd - this.customBtnWidth) + 'px)';
                                 } else {
                                     this.deleteSlider = 'transform:translateX(-' + wd + 'px)';
                                 }
                             }
+                            this.openState = true;
                         }
                     }
                 }
@@ -138,7 +148,7 @@ export default {
             e = e || event;
             let parentElement = e.currentTarget.parentElement;
             let itemWd = this.$refs.slipItem.offsetWidth;
-            let wd = this.onlyDelBtn ? 40 : this.buttonWidth;
+            let wd = this.onlyDelBtn ? this.customBtnWidth : this.buttonWidth;
 
             if (e.changedTouches.length == 1) {
                 let endY = e.changedTouches[0].clientY;
@@ -151,29 +161,34 @@ export default {
                         if (this.offset < 0 || this.offset == 0) {
                             this.deleteSlider = 'transform:translateX(0px)';
                             parentElement.dataset.type = 0;
+                            this.openState = false;
                         } else if (this.offset < itemWd - 20) {
                             parentElement.dataset.type = 1;
                             this.deleteSlider = 'transform:translateX(-50px);';
                             this.delBtnStyle = ' width:0px;';
+                            this.openState = true;
                         } else {
                             this.deleteSlider = 'transform:translateX(-' + itemWd + 'px);';
                             this.delBtnStyle = ' width:' + itemWd + 'px;';
                             parentElement.dataset.type = 1;
+                            this.openState = true;
                             this.onlyDelClick();
                         }
                     } else {
                         if (this.offset < wd / 4) {
                             parentElement.dataset.type = 0;
                             this.deleteSlider = 'transform:translateX(0px)';
+                            this.openState = false;
                         } else {
                             //大于一半 滑动到最大值
                             parentElement.dataset.type = 1;
                             if (wd >= itemWd) {
                                 //按钮数不可超出整行宽度
-                                this.deleteSlider = 'transform:translateX(-' + (itemWd - 40) + 'px)';
+                                this.deleteSlider = 'transform:translateX(-' + (itemWd - this.customBtnWidth) + 'px)';
                             } else {
                                 this.deleteSlider = 'transform:translateX(-' + wd + 'px)';
                             }
+                            this.openState = true;
                         }
                     }
                 }

src/packages/video/demo.vue

@@ -68,18 +68,21 @@ export default {
         };
     },
     methods: {
-        play(){
-            console.log('play')
+        play(elm){
+            console.log('play',elm)
         },
-        pause(){
+        pause(e){
             console.log('pause')
-
         },
-        playend(){
-            console.log('playend')
+        playend(e){
+            alert('播放结束')
         }
     }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.nut-video{
+    height:200px;
+}
+</style>

src/packages/video/doc.md

@@ -11,6 +11,15 @@
 	@playend="playend">
 </nut-video>
 ```
+> source属性：设置视频地址和格式类型，可设置多种视频文件格式以便支持不同浏览器的解析支持，一般采用：MP4、webm、ogv等格式
+
+> options属性：设置视频的播放参数，如：autoplay、controls、poster、loop、volume等
+
+> play事件：监听视频播放
+
+> pause事件：监听视频暂停播放
+
+> playend事件：监听视频播放完成
 
 ```javascript
 export default {
@@ -37,6 +46,7 @@ export default {
 
 autoplay属性设置视频自动播放
 
+
 ```html
 <nut-video :sources="sources" :options="options2"></nut-video>
 ```
@@ -144,7 +154,7 @@ export default {
 | options.controls    | 是否展示操作栏                             | Boolean | true     |
 | options.muted       | 是否静音                                   | Boolean | false    |
 | options.volume      | 音量控制                                   | Number | 0.5    |
-| options.disabled    | 是否自动播放                               | Boolean | false    |
+| options.disabled    | 禁用操作（如循环播放的背景图，禁止操作）                               | Boolean | false    |
 | options.playsinline | 是否设置为行内播放元素（解决安卓兼容问题） | Boolean | false    |
 
 

src/packages/video/video.scss

@@ -5,6 +5,7 @@
     display: flex;
     .nut-videoplayer {
         width: 100%;
+        background: #000;
     }
     .playing-mask {
         width: 100%;
@@ -107,7 +108,22 @@
             background-position: -71px 0px;
         }
     }
+    .nut-video-error{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: 111111;
+        background: #000;
+        color: #fff;
+        text-align: center;
+        p{
+            color: #fff;
+        }
+    }
 }
+// video::-webkit-media-controls-play-button{
+//     display: none!important;
+// }
 // ::-webkit-media-controls {
 //     display: none !important;
 // }

src/packages/video/video.vue

@@ -10,14 +10,12 @@
             :poster="options.poster"
             :controls="options.controls"
             @error="handleError"
-            @canplaythrough="state.isLoading = false"
         >
             <source v-for="source in sources" :src="source.src" :type="source.type" :key="source.src" />
         </video>
         <div class="playing-mask" @click="play"></div>
-        <div class="nut-video-play-btn" v-show="!state.playing" @click="play"></div>
-        <div class="nut-video-controller" v-show="showToolbox">
-            <!-- <div class="control-button" :class="{pause:isPlay,play:!isPlay}" @click="playOrPause"></div> -->
+        <div class="nut-video-play-btn" ref="palyBtn" v-show="!state.playing" @click="play"></div>
+        <!-- <div class="nut-video-controller" v-show="showToolbox">
             <div class="current-time">{{ videoSet.displayTime }}</div>
             <div class="progress-container">
                 <div class="progress" ref="progressBar">
@@ -31,7 +29,7 @@
             <div class="duration-time">{{ videoSet.totalTime }}</div>
             <div class="volume"></div>
             <div class="fullscreen-icon" @click="fullScreen"></div>
-        </div>
+        </div> -->
         <!-- 错误弹窗 -->
         <div class="nut-video-error" v-show="state.isError">
             <p class="lose">视频加载失败</p>
@@ -49,7 +47,6 @@ export default {
             type: Boolean,
             default: false
         },
-
         sources: Array,
         options: {
             type: Object,
@@ -94,7 +91,7 @@ export default {
                 }
             },
             state: {
-                contrlShow: true,
+                contrlShow: false,
                 vol: 0.5, //音量
                 currentTime: 0, //当前时间
                 fullScreen: false,
@@ -107,28 +104,6 @@ export default {
     },
     mounted() {
         this.init();
-
-        // this.videoDome.addEventListener('progress', () => {
-        //     setTimeout(() => {
-        //         let v = this.videoDome;
-        //         let r = v.buffered;
-        //         let total = v.duration;
-        //         try {
-        //             let end = r.end(0);
-        //             this.videoTime = total;
-        //             this.videoMetadata = (end / total) * 100;
-        //         } catch (e) {
-        //         }
-        //     }, 100)
-        // }, false);
-        // this.videoDome.addEventListener('seeked', () => {
-        //     if (this.videoDome.readyState >= 2) {
-        //         this.isLoading = false;
-        //     }
-        // });
-        // this.videoDome.addEventListener('waiting', _ => {
-        //     this.isLoading = true;
-        // })
     },
     methods: {
         init() {
@@ -191,16 +166,17 @@ export default {
                         // this.videoElm.addEventListener('timeupdate', throttle(this.getPlayTime, 100, 1));
                         // 监听结束
                         this.videoElm.addEventListener('ended', this.playEnded);
-                        this.$emit('play', this.video);
+                        this.$emit('play', this.videoElm);
                     } catch (e) {
                         // 捕获url异常出现的错误
+                        this.handleError()
                     }
                 }
                 // 停止状态
                 else {
                     this.isPauseTouch = true;
                     this.videoElm.pause();
-                    this.$emit('pause', this.video);
+                    this.$emit('pause', this.videoElm);
                 }
             }
         },
@@ -224,24 +200,14 @@ export default {
         },
 
         fullScreen() {
-            const isFullscreen = document.webkitIsFullScreen || document.fullscreen;
-            if (isFullscreen) {
-                const exitFunc = document.exitFullscreen || document.webkitExitFullscreen;
-                exitFunc.call(document);
+            if (!this.state.fullScreen) {
+                this.state.fullScreen = true;
+                this.video.webkitRequestFullScreen();
             } else {
-                const element = this.videoElm;
-                const fullscreenFunc = element.requestFullscreen || element.webkitRequestFullScreen;
-                fullscreenFunc.call(element);
+                this.state.fullScreen = false;
+                document.webkitCancelFullScreen();
             }
-
-            // if (!this.state.fullScreen) {
-            //     this.state.fullScreen = true;
-            //     this.video.webkitRequestFullScreen();
-            // } else {
-            //     this.state.fullScreen = false;
-            //     document.webkitCancelFullScreen();
-            // }
-            // setTimeout(this.initVideo, 200);
+            setTimeout(this.initVideo, 200);
         },
         // 获取播放时间
         getPlayTime() {
@@ -271,6 +237,7 @@ export default {
         touchend() {},
         // 点击重新加载
         retry() {
+            console.log('error')
             this.state.isError = false;
             this.init();
         }