This library is used to create a split-screen effect of the page, so that the page on the folding mobile has a better experience.
<script setup>
import { SplitScreen } from 'vue-split-screen';
const turnOn = ref(true);
/**
* @description: Whether to reverse the split screen
*/
const reverse = ref(false);
</script>
<template>
<router-view v-slot="{ Component }">
<SplitScreen :turn-on="turnOn" :split-reverse="reverse">
<component :is="Component" />
<template #placeholder>
<!-- placehoder template -->
</template>
</SplitScreen>
</router-view>
</template>