title: 全局图层

全局图层 {#global-layers}

自 v0.17 起可用

全局图层允许你拥有持续存在的跨幻灯片自定义组件。这对于有页脚、跨幻灯片动画、全局特效等来说可能很有用。

Slidev 为这种用法提供了三种图层，在你的项目根目录下创建 global-top.vue 、 global-bottom.vue 或 custom-nav-controls.vue 文件，它们会被自动识别。

图层关系：

  • 全局顶层 (global-top.vue)
  • 幻灯片
  • 全局底层 (global-bottom.vue)
  • 导航控件
    • 自定义导航控件 (custom-nav-controls.vue)

示例 {#example}

  1. <!-- global-top.vue -->
  2. <template>
  3.   <footer class="absolute bottom-0 left-0 right-0 p-2">Your Name</footer>
  4. </template>

文字 Your Name 将出现在你所有幻灯片中。

  1. <!-- custom-nav-controls -->
  2. <template>
  3.   <button class="icon-btn" title="Next" @click="$slidev.nav.next">
  4.     <carbon:arrow-right />
  5.   </button>
  6. </template>

Next 按钮会出现在导航栏中。

如需有条件地启用它，你可以用 Vue 全局上下文。

  1. <!-- 在第四页时隐藏页脚 -->
  2. <template>
  3.   <footer
  4.     v-if="$slidev.nav.currentPage !== 4"
  5.     class="absolute bottom-0 left-0 right-0 p-2"
  6.   >
  7.     Your Name
  8.   </footer>
  9. </template>
  1. <!-- "cover" 布局的情况下隐藏页脚 -->
  2. <template>
  3.   <footer
  4.     v-if="$slidev.nav.currentLayout !== 'cover'"
  5.     class="absolute bottom-0 left-0 right-0 p-2"
  6.   >
  7.     Your Name
  8.   </footer>
  9. </template>
  1. <!-- 一个显示页数的页脚示例 -->
  2. <template>
  3.   <footer
  4.     v-if="$slidev.nav.currentLayout !== 'cover'"
  5.     class="absolute bottom-0 left-0 right-0 p-2"
  6.   >
  7.     {{ $slidev.nav.currentPage }} / {{ $slidev.nav.total }}
  8.   </footer>
  9. </template>
  1. <!-- custom-nav-controls -->
  2. <!-- 在演讲者模式隐藏按钮 -->
  3. <template>
  4.   <button v-if="!$slidev.nav.isPresenter" class="icon-btn" title="Next" @click="$slidev.nav.next">
  5.     <carbon:arrow-right />
  6.   </button>
  7. </template>