Bilibili-Evolved/registry/lib/components/style/custom-navbar/mixins.ts
2025-04-03 08:56:05 +08:00

49 lines
1.1 KiB
TypeScript

import { onMounted } from 'vue'
import { CustomNavbarItem } from './custom-navbar-item'
export const popperMixin = Vue.extend({
props: {
item: {
type: CustomNavbarItem,
required: true,
},
container: {
type: HTMLElement,
required: true,
},
},
mounted() {
const navBarItem = this.item as CustomNavbarItem
const containerElement = this.container as HTMLElement
if (containerElement) {
navBarItem?.usePopper(containerElement, this.$el.parentElement)
}
},
methods: {
popupShow() {
const navBarItem = this.item as CustomNavbarItem
navBarItem?.popper?.update()
},
},
})
export interface UsePopperProps {
item: CustomNavbarItem
container: HTMLElement
}
export const usePopper = (props: UsePopperProps) => {
onMounted(() => {
const navBarItem = props.item
const containerElement = props.container
if (containerElement) {
navBarItem?.usePopper(containerElement, containerElement.children[0] as HTMLElement)
}
})
return {
popupShow() {
const navBarItem = props.item
navBarItem?.popper?.update()
},
}
}