update video

src/packages/leftslip/leftslip.vue

@@ -1,19 +1,11 @@
 <template>
     <div class="nut-leftslip">
         <div class="nut-leftslip-item" ref="slipItem" :style="deleteSlider">
-            <div
-                class="nut-leftslip-item-main"
-                @touchstart="touchStart($event)"
-                @touchmove="touchMove($event)"
-                @touchend="touchEnd($event)"
-            >
+            <div class="nut-leftslip-item-main" @touchstart="touchStart($event)" @touchmove="touchMove($event)"
+                @touchend="touchEnd($event)">
                 <slot name="slip-main"></slot>
             </div>
 
-            <!-- <div v-if="onlyDelBtn" class="delbtn" ref="delBtn">
-                <div :style="delBtnStyle" class="trans"></div>
-                <span @click.prevent="onlyDelClick($event)">删除</span></div
-            > -->
             <div class="nut-leftslip-item-btn">
                 <!-- <a @click.prevent="onlyDelClick($event)">删除</a> -->
                 <slot name="slipbtns">
@@ -24,179 +16,179 @@
     </div>
 </template>
 <script>
-export default {
-    name: 'nut-leftslip',
-    props: {
-        onlyDelBtn: {
-            type: Boolean,
-            default: false
-        },
-        btnSlipDel: {
-            type: Boolean,
-            default: false
-        }
-    },
-    data() {
-        return {
-            startX: 0,
-            startY: 0,
-            moveX: 0,
-            moveY: 0,
-            left: 0,
-            buttonWidth: 0,
-            disX: 0, //移动距离
-            deleteSlider: '', //滑动时的效果,使用v-bind:style="deleteSlider"
-            delBtnStyle: '' //单个删除键拖拽删除效果
-        };
-    },
-    mounted() {
-        this.$nextTick(() => {
-            if (this.onlyDelBtn) {
-                return;
-            }
-            for (var slot of this.$slots.slipbtns) {
-                this.buttonWidth = this.buttonWidth + slot.elm.offsetWidth;
-            }
-        });
-
-        window.addEventListener('scroll', this.handleScroll, true);
-    },
-    beforeDestroy() {
-        // 移除监听
-        window.removeEventListener('scroll', this.handleScroll, true);
-    },
-    methods: {
-        handleScroll() {
-            if (this.disX) {
-                this.restSlide();
+    export default {
+        name: 'nut-leftslip',
+        props: {
+            onlyDelBtn: {
+                type: Boolean,
+                default: false
+            },
+            btnSlipDel: {
+                type: Boolean,
+                default: false
             }
         },
-        handleClick() {
-            this.restSlide();
+        data() {
+            return {
+                startX: 0,
+                startY: 0,
+                moveX: 0,
+                moveY: 0,
+                left: 0,
+                buttonWidth: 0,
+                disX: 0, //移动距离
+                deleteSlider: '', //滑动时的效果,使用v-bind:style="deleteSlider"
+                delBtnStyle: '' //单个删除键拖拽删除效果
+            };
         },
-        onlyDelClick() {
-            //一键删除模式点击删除
-            this.$emit('oneDelete', this.$refs.slipItem);
-            this.restSlide();
+        mounted() {
+            this.$nextTick(() => {
+                if (this.onlyDelBtn) {
+                    return;
+                }
+                for (var slot of this.$slots.slipbtns) {
+                    this.buttonWidth = this.buttonWidth + slot.elm.offsetWidth;
+                }
+            });
+
+            window.addEventListener('scroll', this.handleScroll, true);
         },
-        touchStart(e) {
-            this.restSlide();
-            e = e || event;
-            //等于1时表示此时有只有一只手指在触摸屏幕
-            if (e.touches.length == 1) {
-                this.startX = e.touches[0].clientX;
-                this.startY = e.touches[0].clientY;
-            }
+        beforeDestroy() {
+            // 移除监听
+            window.removeEventListener('scroll', this.handleScroll, true);
         },
-        touchMove(e) {
-            e = e || event;
-            //获取当前滑动对象
-            let parentElement = e.currentTarget.parentElement;
-            //获取删除按钮的宽度，此宽度为滑块左滑的最大距离
-            let itemWd = this.$refs.slipItem.offsetWidth;
-            let wd = this.onlyDelBtn ? 40 : this.buttonWidth;
+        methods: {
+            handleScroll() {
+                if (this.disX) {
+                    this.restSlide();
+                }
+            },
+            handleClick() {
+                this.restSlide();
+            },
+            onlyDelClick() {
+                //一键删除模式点击删除
+                this.$emit('oneDelete', this.$refs.slipItem);
+                this.restSlide();
+            },
+            touchStart(e) {
+                this.restSlide();
+                e = e || event;
+                //等于1时表示此时有只有一只手指在触摸屏幕
+                if (e.touches.length == 1) {
+                    this.startX = e.touches[0].clientX;
+                    this.startY = e.touches[0].clientY;
+                }
+            },
+            touchMove(e) {
+                e = e || event;
+                //获取当前滑动对象
+                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);
-                    if (this.onlyDelBtn) {
-                        //单一删除，左滑一键删除
-                        if (this.disX < 0 || this.disX == 0) {
-                            this.deleteSlider = 'transform:translateX(0px)';
-                        }
-                        this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
-                        this.delBtnStyle = 'width:' + this.disX + 'px';
-                        parentElement.dataset.type = 1; //设置滑动展开隐藏标志位，左滑展开为1，右滑或复位为0
-                    } else {
-                        // 如果是向右滑动或者不滑动，不改变滑块的位置
-                        if (this.disX < wd / 4 || this.disX == 0) {
-                            this.deleteSlider = 'transform:translateX(0px)';
-                            parentElement.dataset.type = 0;
-                        } else if (this.disX > wd / 4) {
-                            parentElement.dataset.type = 1;
+                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);
+                        if (this.onlyDelBtn) {
+                            //单一删除，左滑一键删除
+                            if (this.disX < 0 || this.disX == 0) {
+                                this.deleteSlider = 'transform:translateX(0px)';
+                            }
                             this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
-                            // 最大也只能等于删除按钮宽度
-                            if (this.disX * 1.5 >= wd) {
-                                // parentElement.dataset.type = 1;
-                                if (wd >= itemWd) {
-                                    this.deleteSlider = 'transform:translateX(-' + (itemWd - 40) + 'px)';
-                                } else {
-                                    this.deleteSlider = 'transform:translateX(-' + wd + 'px)';
+                            this.delBtnStyle = 'width:' + this.disX + 'px';
+                            parentElement.dataset.type = 1; //设置滑动展开隐藏标志位，左滑展开为1，右滑或复位为0
+                        } else {
+                            // 如果是向右滑动或者不滑动，不改变滑块的位置
+                            if (this.disX < wd / 4 || this.disX == 0) {
+                                this.deleteSlider = 'transform:translateX(0px)';
+                                parentElement.dataset.type = 0;
+                            } else if (this.disX > wd / 4) {
+                                parentElement.dataset.type = 1;
+                                this.deleteSlider = 'transform:translateX(-' + this.disX + 'px)';
+                                // 最大也只能等于删除按钮宽度
+                                if (this.disX >= wd) {
+                                    // parentElement.dataset.type = 1;
+                                    if (wd >= itemWd) {
+                                        this.deleteSlider = 'transform:translateX(-' + (itemWd - 40) + 'px)';
+                                    } else {
+                                        this.deleteSlider = 'transform:translateX(-' + wd + 'px)';
+                                    }
                                 }
                             }
                         }
                     }
                 }
-            }
-        },
-        touchEnd(e) {
-            e = e || event;
-            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);
-                    if (this.onlyDelBtn) {
-                        //单一按钮，左滑一键删除
-                        if (this.disX < 0 || this.disX == 0) {
-                            this.deleteSlider = 'transform:translateX(0px)';
-                            parentElement.dataset.type = 0;
-                        } else if (this.disX < itemWd - 20) {
-                            parentElement.dataset.type = 1;
-                            this.deleteSlider = 'transform:translateX(-50px);';
-                            this.delBtnStyle = ' width:0px;';
+            },
+            touchEnd(e) {
+                e = e || event;
+                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);
+                        if (this.onlyDelBtn) {
+                            //单一按钮，左滑一键删除
+                            if (this.disX < 0 || this.disX == 0) {
+                                this.deleteSlider = 'transform:translateX(0px)';
+                                parentElement.dataset.type = 0;
+                            } else if (this.disX < itemWd - 20) {
+                                parentElement.dataset.type = 1;
+                                this.deleteSlider = 'transform:translateX(-50px);';
+                                this.delBtnStyle = ' width:0px;';
+                            } else {
+                                this.deleteSlider = 'transform:translateX(-' + itemWd + 'px);';
+                                this.delBtnStyle = ' width:' + itemWd + 'px;';
+                                parentElement.dataset.type = 1;
+                                this.onlyDelClick();
+                            }
                         } else {
-                            this.deleteSlider = 'transform:translateX(-' + itemWd + 'px);';
-                            this.delBtnStyle = ' width:' + itemWd + 'px;';
-                            parentElement.dataset.type = 1;
-                            this.onlyDelClick();
-                        }
-                    } else {
-                        //如果距离小于删除按钮的四分之一,强行回到起点
+                            //如果距离小于删除按钮的四分之一,强行回到起点
 
-                        if (this.disX < wd / 4) {
-                            parentElement.dataset.type = 0;
-                            this.deleteSlider = 'transform:translateX(0px)';
-                        } else {
-                            //大于一半 滑动到最大值
-                            parentElement.dataset.type = 1;
-                            if (wd >= itemWd) {
-                                //按钮数不可超出整行宽度
-                                this.deleteSlider = 'transform:translateX(-' + (itemWd - 40) + 'px)';
+                            if (this.disX < wd / 4) {
+                                parentElement.dataset.type = 0;
+                                this.deleteSlider = 'transform:translateX(0px)';
                             } else {
-                                this.deleteSlider = 'transform:translateX(-' + wd + 'px)';
+                                //大于一半 滑动到最大值
+                                parentElement.dataset.type = 1;
+                                if (wd >= itemWd) {
+                                    //按钮数不可超出整行宽度
+                                    this.deleteSlider = 'transform:translateX(-' + (itemWd - 40) + 'px)';
+                                } else {
+                                    this.deleteSlider = 'transform:translateX(-' + wd + 'px)';
+                                }
                             }
                         }
-                    }
 
-                    // console.log('touchEnd:dataset', parentElement.dataset.type);
+                        // console.log('touchEnd:dataset', parentElement.dataset.type);
+                    }
                 }
-            }
-        },
-        restSlide() {
-            let listItems = document.querySelectorAll('.nut-leftslip-item');
+            },
+            restSlide() {
+                let listItems = document.querySelectorAll('.nut-leftslip-item');
 
-            // 复位
-            for (let i = 0; i < listItems.length; i++) {
-                listItems[i].style = 'transform:translateX(0' + 'px)';
-                listItems[i].dataset.type = 0; //是否展开标志位默认0，左滑展开为1，右滑隐藏为0
-            }
-            if (this.onlyDelBtn) {
-                let delBtns = document.querySelectorAll('.delbtn .trans');
-                for (let j = 0; j < delBtns.length; j++) {
-                    delBtns[j].style = '';
+                // 复位
+                for (let i = 0; i < listItems.length; i++) {
+                    listItems[i].style = 'transform:translateX(0' + 'px)';
+                    listItems[i].dataset.type = 0; //是否展开标志位默认0，左滑展开为1，右滑隐藏为0
+                }
+                if (this.onlyDelBtn) {
+                    let delBtns = document.querySelectorAll('.delbtn .trans');
+                    for (let j = 0; j < delBtns.length; j++) {
+                        delBtns[j].style = '';
+                    }
                 }
             }
         }
-    }
-};
-</script>
+    };
+</script>

src/packages/video/demo.vue

@@ -2,7 +2,8 @@
     <div>
         <h4>基本用法</h4>
         <div class="video-con">
-            <nut-video :sources="sources" :options="options" @play="play" @pause="pause" @playend="playend"></nut-video>
+            <nut-video :sources="sources" :options="options" @play="play" @pause="pause" @playend="playend">
+            </nut-video>
         </div>
         <h4>自动播放</h4>
         <p>autoplay属性设置视频自动播放</p>
@@ -31,12 +32,13 @@
             <nut-video :sources="sources" :options="options6"></nut-video>
         </div>
         <h4>视频切换</h4>
-        <p>播放上一个、下一个视频</p>
-        <div class="video-con" ref="changeVideo">
+        <p>当视频地址发生变化时，重置视频</p>
+        <button @click="changeVideo">切换视频</button>
+        <div class="video-con">
             <nut-video :sources="sources1" :options="options"></nut-video>
         </div>
 
-        <button @click="prevVideo">播放上一个</button> <button @click="nextVideo">播放下一个</button>
+
     </div>
 </template>
 
@@ -92,19 +94,10 @@
 
             };
         },
+        mounted() {
+
+        },
         methods: {
-            play(elm) {
-                console.log('play', elm);
-            },
-            pause(e) {
-                console.log('pause');
-            },
-            playend(e) {
-                alert('播放结束');
-            },
-            testPlay(e) {
-                console.log('play', elm);
-            },
             changeVideo() {
                 this.sources1 = [
                     {
@@ -112,43 +105,17 @@
                         type: 'video/mp4'
                     }
                 ]
-
-                let videoElement = document.getElementById("testvideo").getElementsByTagName('video')[0];
-                videoElement.pause();
-                videoElement.removeAttribute('src');
-                videoElement.src = this.sources1.src;
-                videoElement.load();
             },
-            prevVideo() {
-                let videoCon = this.$refs.changeVideo
-                let player = videoCon.getElementsByTagName('video')[0];
-
-                this.sources1 = [
-                    {
-                        src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-                        type: 'video/mp4'
-                    }
-                ]
-                this.$nextTick(() => {
-                    player.load()
-                })
-
+            play(elm) {
+                console.log('play', elm);
+            },
+            pause(e) {
+                console.log('pause');
+            },
+            playend(e) {
+                alert('播放结束');
             },
-            nextVideo() {
-                let videoCon = this.$refs.changeVideo
-                let player = videoCon.getElementsByTagName('video')[0];
-
-                this.sources1 = [
-                    {
-                        src: 'http://vjs.zencdn.net/v/oceans.mp4',
-                        type: 'video/mp4'
-                    }
-                ]
-                this.$nextTick(() => {
-                    player.load()
-                })
 
-            }
         }
     };
 </script>

src/packages/video/doc.md

@@ -159,10 +159,10 @@ export default {
 
 ## 视频切换
 
-播放上一个、下一个视频
+当视频地址发生变化时，重置视频
 
 ```html
-  	<div class="video-con" ref="changeVideo">
+  	<div class="video-con" >
 		<nut-video :sources="sources1" :options="options"></nut-video>
 	</div>
 ```
@@ -184,36 +184,14 @@ export default {
     	},
   	}
 	methods: {
-        prevVideo() {
-			let videoCon = this.$refs.changeVideo
-			let player = videoCon.getElementsByTagName('video')[0];
-			//改变视频源
-			this.sources1 = [
-				{
-					src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-					type: 'video/mp4'
-				}
-			]
-			this.$nextTick(() => {
-				player.load()
-			})
-
-		},
-		nextVideo() {
-			let videoCon = this.$refs.changeVideo
-			let player = videoCon.getElementsByTagName('video')[0];
-			//改变视频源
+        changeVideo() {
 			this.sources1 = [
 				{
 					src: 'http://vjs.zencdn.net/v/oceans.mp4',
 					type: 'video/mp4'
 				}
 			]
-			this.$nextTick(() => {
-				player.load()
-			})
-
-		}
+		},
     }
 };
 ```

src/packages/video/video.vue

@@ -93,6 +93,18 @@
                 }
             };
         },
+        watch: {
+            sources: {
+                handler(newValue, oldValue) {
+                    if (newValue && oldValue && newValue != oldValue) {
+                        this.$nextTick(() => {
+                            this.videoElm.load()
+                        })
+                    }
+                },
+                immediate: true
+            }
+        },
         mounted() {
             this.init();
         },