Vueグローバルコンテキスト

Slidevは高度な条件やナビゲーションのコントロールのために、グローバルVueコンテキスト $slidevを注入しています。

使い方

MarkdownやVueテンプレートのどこでも、"Mustache"タグを使ってアクセスできます。

<!-- slides.md -->

# Page 1

Current page is: {{ $slidev.nav.currentPage }}
<!-- Foo.vue -->

<template>
  <div>Title: {{ $slidev.configs.title }}</div>
  <button @click="$slidev.nav.next">Next Page</button>
</template>

プロパティ

$slidev.nav

スライドナビゲーションのプロパティとコントロールを保持するリアクティブオブジェクトです。 例:

$slidev.nav.next() // go next step

$slidev.nav.nextSlide() // go next slide (skip v-clicks)

$slidev.nav.go(10) // go slide #10
$slidev.nav.currentPage // current slide number

$slidev.nav.currentLayout // current layout id

$slidev.nav.clicks // current clicks count

利用できるプロパティの詳細については、nav.tsのエクスポートを参照してください。

$slidev.configs

slides.mdフロントマターの設定をパースしたものを保持するリアクティブオブジェクトです。 例:

---
title: My First Slidev!
---
{{ $slidev.configs.title }} // 'My First Slidev!'

$slidev.themeConfigs

テーマの設定をパースしたものを保持するリアクティブオブジェクトです。

---
title: My First Slidev!
themeConfig:
  primary: #213435
---
{{ $slidev.themeConfigs.primary }} // '#213435'