Replace popupMixin to vue setup

This commit is contained in:
timongh 2023-02-07 15:32:00 +08:00
parent eb2eba2868
commit 366a623008
12 changed files with 81 additions and 57 deletions

View File

@ -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,

View File

@ -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,

View File

@ -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,

View File

@ -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,

View File

@ -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>

View File

@ -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 => {

View File

@ -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 }
}

View File

@ -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,

View File

@ -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 {

View File

@ -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>

View File

@ -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,

View File

@ -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 {