修改：播放视屏时使关闭按钮自动消失
This commit is contained in:
jmal
parent
ab987e71e3
commit
11d927e400
@ -885,7 +885,6 @@
|
||||
}
|
||||
}
|
||||
},ws.headers);
|
||||
console.log("订阅",'/user/queue/update')
|
||||
},
|
||||
load () {
|
||||
this.getFileList(true)
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="preview" v-if="show">
|
||||
<van-overlay :show="show">
|
||||
<div class="wrapper">
|
||||
<div class="block" @mouseenter="closeBarShow = true" @mouseleave="closeBarShow = false">
|
||||
<div class="block" @mousemove="onmousemove" @mouseout="onmouseout" @mouseenter="onmouseenter" @mouseleave="onmouseleave">
|
||||
<!-- <div role="button" @click="close" class="viewer-button viewer-close" data-viewer-action="mix"></div>-->
|
||||
<div v-show="pc?closeBarShow:true" class="close-bar" @click="close">
|
||||
<svg-icon class="audio-player-close" icon-class="close"/>
|
||||
@ -10,7 +10,10 @@
|
||||
<video-player class="video-player vjs-custom-skin"
|
||||
ref="videoPlayer"
|
||||
:playsinline="true"
|
||||
:options="playerOptions">
|
||||
:options="playerOptions"
|
||||
@playing="onPlayerPlaying"
|
||||
@ended="onPlayerEnded"
|
||||
@pause="onPlayerPause">
|
||||
</video-player>
|
||||
</div>
|
||||
</div>
|
||||
@ -81,6 +84,8 @@ export default {
|
||||
},
|
||||
show: this.status,
|
||||
url: '',
|
||||
timeout: null,
|
||||
playing: false,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -102,10 +107,76 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close(){
|
||||
close() {
|
||||
this.show = false
|
||||
this.$emit('update:status', false)
|
||||
}
|
||||
},
|
||||
onPlayerPlaying(){
|
||||
this.playing = true
|
||||
this.clearTimeout()
|
||||
this.timeout = setTimeout(this.timeoutFun, 2500)
|
||||
},
|
||||
onPlayerPause(){
|
||||
this.closeBarShow = true
|
||||
this.playing = false
|
||||
},
|
||||
onPlayerEnded(){
|
||||
this.closeBarShow = true
|
||||
this.playing = false
|
||||
},
|
||||
onmousemove() {
|
||||
if(!this.closeBarShow){
|
||||
this.closeBarShow = true
|
||||
}
|
||||
this.clearTimeout()
|
||||
this.timeout = setTimeout(this.timeoutFun, 2500)
|
||||
},
|
||||
onmouseout() {
|
||||
// console.log('onmouseout')
|
||||
// this.timeout = null
|
||||
},
|
||||
onmouseleave() {
|
||||
this.closeBarShow = false
|
||||
this.clearTimeout()
|
||||
},
|
||||
clearTimeout(){
|
||||
if(this.timeout != null){
|
||||
clearTimeout(this.timeout)
|
||||
this.timeout = null
|
||||
}
|
||||
},
|
||||
timeoutFun(){
|
||||
if(this.playing){
|
||||
console.log("消失",this.$pc)
|
||||
if(!this.$pc){
|
||||
const closeBar = document.querySelector('.block .close-bar')
|
||||
closeBar.style.display = "none"
|
||||
}
|
||||
this.closeBarShow = false
|
||||
}
|
||||
this.clearTimeout()
|
||||
},
|
||||
onmouseenter() {
|
||||
this.closeBarShow = true
|
||||
let player = document.querySelector('.video-player.video-player.vjs-custom-skin')
|
||||
// console.log('player',player)
|
||||
// if(!player) return;
|
||||
// this.onhover(function() {
|
||||
// console.log('124')
|
||||
// }, player, 2000);
|
||||
},
|
||||
// onhover(fun, obj, time) {
|
||||
// var s;
|
||||
// obj.onmouseover = function() {
|
||||
// console.log('onmouseover')
|
||||
// s = setTimeout(fun, 1000);
|
||||
// };
|
||||
// obj.onmouseout = function() {
|
||||
// console.log('onmouseout')
|
||||
// if(!s) return;
|
||||
// clearTimeout(s);
|
||||
// };
|
||||
// },
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -144,6 +215,7 @@ export default {
|
||||
border-style: solid;
|
||||
border-color: transparent transparent transparent #d4d4d475;
|
||||
line-height: 36px;
|
||||
opacity: 1;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
<!--右键菜单-->
|
||||
<e-vue-contextmenu ref="contextShow" class="newFileMenu" :class="menuTriangle" @ctx-show="show" @ctx-hide="hide">
|
||||
<div class="popper-arrow"></div>
|
||||
<ul v-for="(item,index) in menus" :key="item.label">
|
||||
<ul v-for="item in menus" :key="item.label">
|
||||
<li
|
||||
v-if="item.operation === 'unFavorite' || item.operation === 'favorite'"
|
||||
@click="menusOperations(item.operation)"
|
||||
@ -969,7 +969,7 @@
|
||||
|
||||
.share-header-content {
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
svg {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
<!--右键菜单-->
|
||||
<e-vue-contextmenu ref="contextShow" class="newFileMenu" :class="menuTriangle" @ctx-show="show" @ctx-hide="hide">
|
||||
<div class="popper-arrow"></div>
|
||||
<ul v-for="(item,index) in menus" :key="item.label">
|
||||
<ul v-for="item in menus" :key="item.label">
|
||||
<li
|
||||
v-if="item.operation === 'unFavorite' || item.operation === 'favorite'"
|
||||
@click="menusOperations(item.operation)"
|
||||
@ -916,9 +916,6 @@
|
||||
.searchClass[data-v-92fa2b3e] {
|
||||
padding: 3px;
|
||||
}
|
||||
.share-h {
|
||||
//padding: 0 15px;
|
||||
}
|
||||
.share-header {
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
@ -933,7 +930,7 @@
|
||||
|
||||
.share-header-content {
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
svg {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
@ -29,11 +29,7 @@ function connect(username,token){
|
||||
};
|
||||
// 向服务器发起websocket连接
|
||||
ws.stompClient.connect(ws.headers,() => {
|
||||
console.log('websocket连接成功！')
|
||||
ws.isConnected = true;
|
||||
// 订阅系统数据 '/topic/updateData/2/system'
|
||||
// 订阅合并数据 '/topic/updateData/mergeDate/2'
|
||||
// 订阅冷水机1号数据 /topic/updateData/2/1101/1
|
||||
}, (err) => {
|
||||
ws.isConnected = false;
|
||||
// 连接发生错误时的处理函数
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user