tropsCode/src/components/RankingWindow/index.vue

<template>
  <Transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
    <div class="mask" v-if="rankingState">
      <Ranking :imWindow="true" @getClose="close"></Ranking>
    </div>
  </Transition>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
import Ranking from "@/views/ranking/index"
const emit = defineEmits(['getClose']);

//父值
const props = defineProps({
});


const data = reactive<any>({
  rankingState: false
});

const { rankingState } = toRefs(data);

//打开
const open = () => {
  rankingState.value = true;
};

//关闭
const close = () => {
  rankingState.value = false;
  emit('getClose', false);
};

//暴露给父组件用
defineExpose({
  open,
  close
})
</script>
<style lang="scss" scoped>
.mask {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background: radial-gradient(87% 87% at 9% -34%, #315f7e 0%, #0f1926 100%);
  z-index: 998;
}
</style>