mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
点击按钮转移预览视频到弹窗,关闭弹窗自动移回
This commit is contained in:
parent
fa68e2e14b
commit
c77b7e14d0
@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="bigger-preview-video-container">
|
||||
<VPopup v-model="showPopup">
|
||||
<div>弹窗内容</div>
|
||||
</VPopup>
|
||||
</div>
|
||||
<VPopup v-model="showPopup" class="bigger-preview-video-container" @popup-change="onPopupChange">
|
||||
<div ref="popupContent"></div>
|
||||
</VPopup>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@ -18,14 +16,46 @@ export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
showPopup: false,
|
||||
movedDom: null as HTMLElement | null,
|
||||
originalParent: null as Node | null,
|
||||
originalNextSibling: null as Node | null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openPopup() {
|
||||
openPopup(dom: HTMLElement) {
|
||||
this.restoreDom()
|
||||
if (!dom) {
|
||||
return
|
||||
}
|
||||
|
||||
// 保存原父节点和下一个兄弟节点
|
||||
this.originalParent = dom.parentNode
|
||||
this.originalNextSibling = dom.nextSibling
|
||||
// 移动到popupContent
|
||||
const popupContent = this.$refs.popupContent as HTMLElement
|
||||
if (popupContent && dom.parentNode !== popupContent) {
|
||||
popupContent.appendChild(dom)
|
||||
this.movedDom = dom
|
||||
}
|
||||
|
||||
this.showPopup = true
|
||||
},
|
||||
closePopup() {
|
||||
this.showPopup = false
|
||||
restoreDom() {
|
||||
if (this.movedDom && this.originalParent) {
|
||||
if (this.originalNextSibling) {
|
||||
this.originalParent.insertBefore(this.movedDom, this.originalNextSibling)
|
||||
} else {
|
||||
this.originalParent.appendChild(this.movedDom)
|
||||
}
|
||||
this.movedDom = null
|
||||
this.originalParent = null
|
||||
this.originalNextSibling = null
|
||||
}
|
||||
},
|
||||
onPopupChange(val: boolean) {
|
||||
if (!val) {
|
||||
this.restoreDom()
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
@ -33,6 +63,10 @@ export default defineComponent({
|
||||
|
||||
<style lang="scss">
|
||||
.bigger-preview-video-container {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -39,7 +39,9 @@ const entry: ComponentEntry = async () => {
|
||||
btnClass: className,
|
||||
btnOnClickCallback: (e: MouseEvent) => {
|
||||
e.preventDefault()
|
||||
videoContainer?.openPopup()
|
||||
|
||||
const video = instance.$el.parentElement.closest('.pic-box')
|
||||
videoContainer?.openPopup(video)
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user