Vue-split-screen NPM

vue-split-screen

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.

usage

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