Bilibili-Evolved/registry/lib/components/style/custom-navbar/ranking/NavbarRanking.vue

66 lines
1.3 KiB
Vue

<template>
<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>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { popupProps, usePopup } from '../mixins'
interface RankingEntry {
href: string
name: string
}
const entries = [
{
href: 'https://www.bilibili.com/v/popular/all',
name: '综合热门',
},
{
href: 'https://www.bilibili.com/v/popular/weekly',
name: '每周必看',
},
{
href: 'https://www.bilibili.com/v/popular/history',
name: '入站必刷',
},
{
href: 'https://www.bilibili.com/v/popular/rank/all',
name: '排行榜',
},
{
href: 'https://www.bilibili.com/v/popular/music',
name: '全站音乐榜',
},
{
href: 'https://www.bilibili.com/v/popular/drama',
name: '短剧榜',
},
] as RankingEntry[]
export default defineComponent({
name: 'RankingPopup',
props: popupProps,
setup: usePopup,
data() {
return {
entries,
}
},
})
</script>
<style lang="scss" scoped>
@import '../nav-link';
.ranking-popup {
width: max-content;
.ranking-entry {
a {
@include nav-link();
}
}
}
</style>