63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<el-dialog
|
||
|
|
v-model="visible"
|
||
|
|
title="排行榜"
|
||
|
|
width="1000px"
|
||
|
|
top="4vh"
|
||
|
|
draggable
|
||
|
|
align-center
|
||
|
|
append-to-body
|
||
|
|
destroy-on-close
|
||
|
|
:close-on-click-modal="false"
|
||
|
|
class="media-rank-dialog"
|
||
|
|
@opened="onDialogOpened"
|
||
|
|
>
|
||
|
|
<div class="media-rank-dialog__body">
|
||
|
|
<rank-board-panel ref="panelRef" embed :auto-load="false" />
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, computed, nextTick } from 'vue'
|
||
|
|
import RankBoardPanel from './rank-board-panel.vue'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
modelValue: { type: Boolean, default: false }
|
||
|
|
})
|
||
|
|
|
||
|
|
const emit = defineEmits(['update:modelValue'])
|
||
|
|
|
||
|
|
const visible = computed({
|
||
|
|
get: () => props.modelValue,
|
||
|
|
set: (v) => emit('update:modelValue', v)
|
||
|
|
})
|
||
|
|
|
||
|
|
const panelRef = ref(null)
|
||
|
|
|
||
|
|
function onDialogOpened () {
|
||
|
|
nextTick(() => {
|
||
|
|
panelRef.value?.loadData?.()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.media-rank-dialog__body {
|
||
|
|
max-height: min(80vh, 860px);
|
||
|
|
overflow: auto;
|
||
|
|
margin: -4px 0 0 0;
|
||
|
|
padding-right: 2px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.media-rank-dialog .el-dialog__header {
|
||
|
|
cursor: move;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
.media-rank-dialog .el-dialog__body {
|
||
|
|
padding: 8px 12px 16px 12px;
|
||
|
|
}
|
||
|
|
</style>
|