添加关闭弹窗(缩小图标)按钮逻辑

This commit is contained in:
wsgh0202 2025-06-25 23:48:43 +08:00
parent c77b7e14d0
commit 264d51fbed
No known key found for this signature in database
GPG Key ID: F9658C3FEDCF6979
4 changed files with 41 additions and 4 deletions

View File

@ -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) {

View File

@ -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) {

View File

@ -1 +1,4 @@
放大鼠标悬停于视频卡片时播放的5分钟预览
放大鼠标悬停于视频卡片时播放的5分钟预览
- 点击放大镜图标放大预览
- 点击缩小图标或者预览框外空白处关闭预览

View File

@ -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
},
},
})