diff --git a/registry/lib/components/utils/bigger-preview/PreviewButton.vue b/registry/lib/components/utils/bigger-preview/PreviewButton.vue index 15937d2ea..6c50a13a7 100644 --- a/registry/lib/components/utils/bigger-preview/PreviewButton.vue +++ b/registry/lib/components/utils/bigger-preview/PreviewButton.vue @@ -1,6 +1,6 @@ @@ -23,6 +23,10 @@ export default defineComponent({ type: Function, required: true, }, + enlarged: { + type: Boolean, + default: false, + }, }, methods: { onClick(event: MouseEvent) { diff --git a/registry/lib/components/utils/bigger-preview/VideoContainer.vue b/registry/lib/components/utils/bigger-preview/VideoContainer.vue index 909a33f7c..fb082837d 100644 --- a/registry/lib/components/utils/bigger-preview/VideoContainer.vue +++ b/registry/lib/components/utils/bigger-preview/VideoContainer.vue @@ -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) { diff --git a/registry/lib/components/utils/bigger-preview/index.md b/registry/lib/components/utils/bigger-preview/index.md index 8efa0f329..bd0f43b20 100644 --- a/registry/lib/components/utils/bigger-preview/index.md +++ b/registry/lib/components/utils/bigger-preview/index.md @@ -1 +1,4 @@ -放大鼠标悬停于视频卡片时播放的5分钟预览 \ No newline at end of file +放大鼠标悬停于视频卡片时播放的5分钟预览 + +- 点击放大镜图标放大预览 +- 点击缩小图标或者预览框外空白处关闭预览 diff --git a/registry/lib/components/utils/bigger-preview/index.ts b/registry/lib/components/utils/bigger-preview/index.ts index 48a644ba1..1573406e0 100644 --- a/registry/lib/components/utils/bigger-preview/index.ts +++ b/registry/lib/components/utils/bigger-preview/index.ts @@ -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 }, }, })