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