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'