mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
添加关闭弹窗(缩小图标)按钮逻辑
This commit is contained in:
parent
c77b7e14d0
commit
264d51fbed
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<VButton :class="['bigger-preview-button', btnClass]" style="padding: 0" @click="onClick">
|
||||
<VIcon icon="mdi-magnify-plus" :size="16"></VIcon>
|
||||
<VIcon :icon="enlarged ? 'mdi-magnify-minus' : 'mdi-magnify-plus'" :size="16"></VIcon>
|
||||
</VButton>
|
||||
</template>
|
||||
|
||||
@ -23,6 +23,10 @@ export default defineComponent({
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
enlarged: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClick(event: MouseEvent) {
|
||||
|
||||
@ -13,6 +13,10 @@ export default defineComponent({
|
||||
components: {
|
||||
VPopup,
|
||||
},
|
||||
model: {
|
||||
prop: 'showPopup',
|
||||
event: 'popup-change',
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showPopup: false,
|
||||
@ -40,6 +44,10 @@ export default defineComponent({
|
||||
|
||||
this.showPopup = true
|
||||
},
|
||||
closePopup() {
|
||||
this.restoreDom()
|
||||
this.showPopup = false
|
||||
},
|
||||
restoreDom() {
|
||||
if (this.movedDom && this.originalParent) {
|
||||
if (this.originalNextSibling) {
|
||||
|
||||
@ -1 +1,4 @@
|
||||
放大鼠标悬停于视频卡片时播放的5分钟预览
|
||||
放大鼠标悬停于视频卡片时播放的5分钟预览
|
||||
|
||||
- 点击放大镜图标放大预览
|
||||
- 点击缩小图标或者预览框外空白处关闭预览
|
||||
|
||||
@ -40,8 +40,30 @@ const entry: ComponentEntry = async () => {
|
||||
btnOnClickCallback: (e: MouseEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
const video = instance.$el.parentElement.closest('.pic-box')
|
||||
videoContainer?.openPopup(video)
|
||||
// 监听 popup-change 事件
|
||||
const popupChangeHandler = (show: boolean) => {
|
||||
// 关闭弹窗时重置图标
|
||||
if (!show) {
|
||||
instance.enlarged = false
|
||||
}
|
||||
}
|
||||
|
||||
// 根据当前状态切换预览
|
||||
if (instance.enlarged) {
|
||||
if (videoContainer) {
|
||||
videoContainer.$off('popup-change', popupChangeHandler)
|
||||
videoContainer.closePopup()
|
||||
}
|
||||
} else {
|
||||
const video = instance.$el.parentElement.closest('.bili-video-card__image,.pic-box')
|
||||
if (videoContainer) {
|
||||
videoContainer.$on('popup-change', popupChangeHandler)
|
||||
videoContainer.openPopup(video)
|
||||
}
|
||||
}
|
||||
|
||||
// 切换按钮图标
|
||||
instance.enlarged = !instance.enlarged
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user