mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Replace popupMixin to vue setup
This commit is contained in:
parent
eb2eba2868
commit
366a623008
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="favorites-list">
|
<div ref="el" class="favorites-list">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<FavoritesFolderSelect v-model:folder="folder"></FavoritesFolderSelect>
|
<FavoritesFolderSelect v-model:folder="folder"></FavoritesFolderSelect>
|
||||||
<div class="search">
|
<div class="search">
|
||||||
@ -74,7 +74,7 @@ import { formatDate, formatDuration } from '@/core/utils/formatters'
|
|||||||
import { logError } from '@/core/utils/log'
|
import { logError } from '@/core/utils/log'
|
||||||
import { DpiImage, ScrollTrigger, TextBox, VButton, VEmpty, VIcon, VLoading } from '@/ui'
|
import { DpiImage, ScrollTrigger, TextBox, VButton, VEmpty, VIcon, VLoading } from '@/ui'
|
||||||
|
|
||||||
import { popperMixin } from '../mixins'
|
import { popupProps, usePopup } from '../mixins'
|
||||||
import { notSelectedFolder } from './favorites-folder'
|
import { notSelectedFolder } from './favorites-folder'
|
||||||
import FavoritesFolderSelect from './FavoritesFolderSelect.vue'
|
import FavoritesFolderSelect from './FavoritesFolderSelect.vue'
|
||||||
|
|
||||||
@ -161,7 +161,8 @@ const ThisComponent = defineComponent({
|
|||||||
DpiImage,
|
DpiImage,
|
||||||
ScrollTrigger,
|
ScrollTrigger,
|
||||||
},
|
},
|
||||||
mixins: [popperMixin],
|
props: popupProps,
|
||||||
|
setup: usePopup,
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: true,
|
loading: true,
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="navbar-feeds">
|
<div ref="el" class="navbar-feeds">
|
||||||
<TabControl ref="tabControl" :tabs="tabs" more-link="https://t.bilibili.com/">
|
<TabControl ref="tabControl" :tabs="tabs" more-link="https://t.bilibili.com/">
|
||||||
<template #more-link>
|
<template #more-link>
|
||||||
所有动态
|
所有动态
|
||||||
@ -14,7 +14,7 @@ import { feedsCardTypes } from '@/components/feeds/api'
|
|||||||
import { getNotifyCount } from '@/components/feeds/notify'
|
import { getNotifyCount } from '@/components/feeds/notify'
|
||||||
import { TabControl, VIcon } from '@/ui'
|
import { TabControl, VIcon } from '@/ui'
|
||||||
|
|
||||||
import { popperMixin } from '../mixins'
|
import { popupProps, usePopup } from '../mixins'
|
||||||
import { tabs } from './tabs/tabs'
|
import { tabs } from './tabs/tabs'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@ -22,7 +22,8 @@ export default defineComponent({
|
|||||||
TabControl,
|
TabControl,
|
||||||
VIcon,
|
VIcon,
|
||||||
},
|
},
|
||||||
mixins: [popperMixin],
|
props: popupProps,
|
||||||
|
setup: usePopup,
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tabs,
|
tabs,
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="custom-navbar-history-list">
|
<div ref="el" class="custom-navbar-history-list">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="header-row">
|
<div class="header-row">
|
||||||
<div class="search">
|
<div class="search">
|
||||||
@ -120,7 +120,7 @@ import {
|
|||||||
VLoading,
|
VLoading,
|
||||||
} from '@/ui'
|
} from '@/ui'
|
||||||
|
|
||||||
import { popperMixin } from '../mixins'
|
import { popupProps, usePopup } from '../mixins'
|
||||||
import type { HistoryItem, TypeFilter } from './types'
|
import type { HistoryItem, TypeFilter } from './types'
|
||||||
import { getHistoryItems, group, HistoryType, types } from './types'
|
import { getHistoryItems, group, HistoryType, types } from './types'
|
||||||
|
|
||||||
@ -135,7 +135,8 @@ const ThisComponent = defineComponent({
|
|||||||
ScrollTrigger,
|
ScrollTrigger,
|
||||||
DpiImage,
|
DpiImage,
|
||||||
},
|
},
|
||||||
mixins: [popperMixin],
|
props: popupProps,
|
||||||
|
setup: usePopup,
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
types,
|
types,
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home-popup" role="list">
|
<div ref="el" class="home-popup" role="list">
|
||||||
<div
|
<div
|
||||||
v-for="[name, data] of Object.entries(categories)"
|
v-for="[name, data] of Object.entries(categories)"
|
||||||
:key="name"
|
:key="name"
|
||||||
@ -34,7 +34,7 @@ import { defineComponent } from 'vue'
|
|||||||
import type { Category } from '@/components/utils/categories/data'
|
import type { Category } from '@/components/utils/categories/data'
|
||||||
import { categories } from '@/components/utils/categories/data'
|
import { categories } from '@/components/utils/categories/data'
|
||||||
|
|
||||||
import { popperMixin } from '../mixins'
|
import { popupProps, usePopup } from '../mixins'
|
||||||
|
|
||||||
const clone = lodash.cloneDeep(categories)
|
const clone = lodash.cloneDeep(categories)
|
||||||
Object.values(clone).forEach((data: any) => {
|
Object.values(clone).forEach((data: any) => {
|
||||||
@ -42,7 +42,8 @@ Object.values(clone).forEach((data: any) => {
|
|||||||
})
|
})
|
||||||
let regionCountFetched = false
|
let regionCountFetched = false
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
mixins: [popperMixin],
|
props: popupProps,
|
||||||
|
setup: usePopup,
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
categories: clone,
|
categories: clone,
|
||||||
|
|||||||
@ -1,13 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<iframe :src="item.src" frameborder="0" :width="item.width" :height="item.height"></iframe>
|
<iframe
|
||||||
|
ref="el"
|
||||||
|
:src="item.src"
|
||||||
|
frameborder="0"
|
||||||
|
:width="item.width"
|
||||||
|
:height="item.height"
|
||||||
|
></iframe>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue'
|
import { defineComponent } from 'vue'
|
||||||
import { popperMixin } from '../mixins'
|
import { popupProps, usePopup } from '../mixins'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'IframePopup',
|
name: 'IframePopup',
|
||||||
mixins: [popperMixin],
|
props: popupProps,
|
||||||
|
setup: usePopup,
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="messages-popup" role="list">
|
<div ref="el" class="messages-popup" role="list">
|
||||||
<div v-for="e of entries" :key="e.name" class="message-entry" role="listitem">
|
<div v-for="e of entries" :key="e.name" class="message-entry" role="listitem">
|
||||||
<a
|
<a
|
||||||
:data-prop="e.prop"
|
:data-prop="e.prop"
|
||||||
@ -17,7 +17,7 @@
|
|||||||
import { defineComponent } from 'vue'
|
import { defineComponent } from 'vue'
|
||||||
import { getJsonWithCredentials } from '@/core/ajax'
|
import { getJsonWithCredentials } from '@/core/ajax'
|
||||||
|
|
||||||
import { popperMixin } from '../mixins'
|
import { popupProps, usePopup } from '../mixins'
|
||||||
|
|
||||||
interface MessageEntry {
|
interface MessageEntry {
|
||||||
prop?: string
|
prop?: string
|
||||||
@ -62,7 +62,8 @@ const entries = [
|
|||||||
] as MessageEntry[]
|
] as MessageEntry[]
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'MessagesPopup',
|
name: 'MessagesPopup',
|
||||||
mixins: [popperMixin],
|
props: popupProps,
|
||||||
|
setup: usePopup,
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
entries: entries.map(e => {
|
entries: entries.map(e => {
|
||||||
|
|||||||
@ -1,28 +1,36 @@
|
|||||||
import { defineComponent } from 'vue'
|
import { onMounted } from '@vue/runtime-dom'
|
||||||
|
import { type Ref, ref } from 'vue'
|
||||||
import { CustomNavbarItem } from './custom-navbar-item'
|
import { CustomNavbarItem } from './custom-navbar-item'
|
||||||
|
|
||||||
export const popperMixin = defineComponent({
|
export const popupProps = {
|
||||||
props: {
|
item: {
|
||||||
item: {
|
type: CustomNavbarItem,
|
||||||
type: CustomNavbarItem,
|
required: true,
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
container: {
|
|
||||||
type: HTMLElement,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
mounted() {
|
container: {
|
||||||
const navBarItem = this.item as CustomNavbarItem
|
type: HTMLElement,
|
||||||
const containerElement = this.container as HTMLElement
|
required: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const usePopup = (props: {
|
||||||
|
item: CustomNavbarItem
|
||||||
|
container: HTMLElement
|
||||||
|
}): {
|
||||||
|
el: Ref<HTMLElement | null>
|
||||||
|
popupShow: () => void
|
||||||
|
} => {
|
||||||
|
const el = ref<HTMLElement | null>(null)
|
||||||
|
onMounted(() => {
|
||||||
|
const navBarItem = props.item
|
||||||
|
const containerElement = props.container
|
||||||
if (containerElement) {
|
if (containerElement) {
|
||||||
navBarItem?.usePopper(containerElement, this.$el.parentElement)
|
navBarItem?.usePopper(containerElement, el.value.parentElement)
|
||||||
}
|
}
|
||||||
},
|
})
|
||||||
methods: {
|
const popupShow = (): void => {
|
||||||
popupShow() {
|
const navBarItem = props.item
|
||||||
const navBarItem = this.item as CustomNavbarItem
|
navBarItem?.popper?.update().then()
|
||||||
navBarItem?.popper?.update()
|
}
|
||||||
},
|
return { el, popupShow }
|
||||||
},
|
}
|
||||||
})
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="ranking-popup" role="list">
|
<div ref="el" class="ranking-popup" role="list">
|
||||||
<div v-for="e of entries" :key="e.name" class="ranking-entry" role="listitem">
|
<div v-for="e of entries" :key="e.name" class="ranking-entry" role="listitem">
|
||||||
<a target="_blank" :href="e.href">{{ e.name }}</a>
|
<a target="_blank" :href="e.href">{{ e.name }}</a>
|
||||||
</div>
|
</div>
|
||||||
@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue'
|
import { defineComponent } from 'vue'
|
||||||
import { popperMixin } from '../mixins'
|
import { popupProps, usePopup } from '../mixins'
|
||||||
|
|
||||||
interface RankingEntry {
|
interface RankingEntry {
|
||||||
href: string
|
href: string
|
||||||
@ -34,7 +34,8 @@ const entries = [
|
|||||||
] as RankingEntry[]
|
] as RankingEntry[]
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'RankingPopup',
|
name: 'RankingPopup',
|
||||||
mixins: [popperMixin],
|
props: popupProps,
|
||||||
|
setup: usePopup,
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
entries,
|
entries,
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="navbar-subscriptions">
|
<div ref="el" class="navbar-subscriptions">
|
||||||
<TabControl ref="tabControl" :tabs="tabs" :more-link="moreLink"></TabControl>
|
<TabControl ref="tabControl" :tabs="tabs" :more-link="moreLink"></TabControl>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -9,14 +9,15 @@ import { getUID } from '@/core/utils'
|
|||||||
import { TabControl } from '@/ui'
|
import { TabControl } from '@/ui'
|
||||||
import type { TabMapping, TabMappings } from '@/ui/tab-mapping'
|
import type { TabMapping, TabMappings } from '@/ui/tab-mapping'
|
||||||
|
|
||||||
import { popperMixin } from '../mixins'
|
import { popupProps, usePopup } from '../mixins'
|
||||||
import { SubscriptionTypes } from './subscriptions'
|
import { SubscriptionTypes } from './subscriptions'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
TabControl,
|
TabControl,
|
||||||
},
|
},
|
||||||
mixins: [popperMixin],
|
props: popupProps,
|
||||||
|
setup: usePopup,
|
||||||
data() {
|
data() {
|
||||||
const uid = getUID()
|
const uid = getUID()
|
||||||
return {
|
return {
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div role="list" class="upload-popup">
|
<div ref="el" role="list" class="upload-popup">
|
||||||
<div role="listitem">
|
<div role="listitem">
|
||||||
<a target="_blank" href="https://member.bilibili.com/platform/upload/text/apply">专栏投稿</a>
|
<a target="_blank" href="https://member.bilibili.com/platform/upload/text/apply">专栏投稿</a>
|
||||||
</div>
|
</div>
|
||||||
@ -24,10 +24,11 @@
|
|||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue'
|
import { defineComponent } from 'vue'
|
||||||
import { popperMixin } from '../mixins'
|
import { popupProps, usePopup } from '../mixins'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
mixins: [popperMixin],
|
props: popupProps,
|
||||||
|
setup: usePopup,
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="user-info-panel">
|
<div ref="el" class="user-info-panel">
|
||||||
<div v-if="isLogin && userInfo.isLogin === true" class="logged-in">
|
<div v-if="isLogin && userInfo.isLogin === true" class="logged-in">
|
||||||
<a class="name" target="_blank" href="https://space.bilibili.com/">{{ userInfo.uname }}</a>
|
<a class="name" target="_blank" href="https://space.bilibili.com/">{{ userInfo.uname }}</a>
|
||||||
<a class="type" target="_blank" href="https://account.bilibili.com/account/big">{{
|
<a class="type" target="_blank" href="https://account.bilibili.com/account/big">{{
|
||||||
@ -155,7 +155,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import format from '@popperjs/core/lib/utils/format'
|
|
||||||
import { defineComponent } from 'vue'
|
import { defineComponent } from 'vue'
|
||||||
import { getJsonWithCredentials, postTextWithCredentials } from '@/core/ajax'
|
import { getJsonWithCredentials, postTextWithCredentials } from '@/core/ajax'
|
||||||
import { getUserInfo } from '@/core/user-info'
|
import { getUserInfo } from '@/core/user-info'
|
||||||
@ -163,14 +162,15 @@ import { formData, getCsrf, getUID } from '@/core/utils'
|
|||||||
import { formatCount } from '@/core/utils/formatters'
|
import { formatCount } from '@/core/utils/formatters'
|
||||||
import { logError } from '@/core/utils/log'
|
import { logError } from '@/core/utils/log'
|
||||||
|
|
||||||
import { popperMixin } from '../mixins'
|
import { popupProps, usePopup } from '../mixins'
|
||||||
|
|
||||||
type PrivilegeType = 1 | 2
|
type PrivilegeType = 1 | 2
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
VIcon: coreApis.ui.VIcon,
|
VIcon: coreApis.ui.VIcon,
|
||||||
},
|
},
|
||||||
mixins: [popperMixin],
|
props: popupProps,
|
||||||
|
setup: usePopup,
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
userInfo: {} as any,
|
userInfo: {} as any,
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="watchlater-list">
|
<div ref="el" class="watchlater-list">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="search">
|
<div class="search">
|
||||||
<TextBox v-model:text="search" linear placeholder="搜索"></TextBox>
|
<TextBox v-model:text="search" linear placeholder="搜索"></TextBox>
|
||||||
@ -57,7 +57,7 @@ import { getComponentSettings } from '@/core/settings'
|
|||||||
import { formatDuration } from '@/core/utils/formatters'
|
import { formatDuration } from '@/core/utils/formatters'
|
||||||
import { DpiImage, TextBox, VButton, VEmpty, VIcon, VLoading } from '@/ui'
|
import { DpiImage, TextBox, VButton, VEmpty, VIcon, VLoading } from '@/ui'
|
||||||
|
|
||||||
import { popperMixin } from '../mixins'
|
import { popupProps, usePopup } from '../mixins'
|
||||||
|
|
||||||
interface WatchlaterCard {
|
interface WatchlaterCard {
|
||||||
aid: number
|
aid: number
|
||||||
@ -80,7 +80,8 @@ const ThisComponent = defineComponent({
|
|||||||
VIcon,
|
VIcon,
|
||||||
DpiImage,
|
DpiImage,
|
||||||
},
|
},
|
||||||
mixins: [popperMixin],
|
props: popupProps,
|
||||||
|
setup: usePopup,
|
||||||
data() {
|
data() {
|
||||||
const redirect = getComponentSettings('watchlaterRedirect')
|
const redirect = getComponentSettings('watchlaterRedirect')
|
||||||
return {
|
return {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user