介绍

Eagle.js是一个基于Vue.js的幻灯片框架，可以用来制作网页幻灯片，幻灯片不一定是PPT，可以作为网页演示的基础框架，因为其公开左右的API，那么你可以自己改造来实现更加强大的功能，支持用于Web演示的动画，主题，交互式小部件等！

Github

https://github.com/Zulko/eagle.js

相关特性

• 幻灯片系统建立在Vue.js之上
• 支持动画，主题，交互式小部件（用于Web演示）
• 在演示文稿中轻松重用组件，幻灯片和样式
• 轻量级核心模块和各种有用的扩展
• 所有API公开，最大可改造性

最重要的是，eagle.js的目标是提供一个简单且非常易于改造的API，这样你就可以摆脱常规，制作出你真正想要的幻灯片。

DEMO预览

你可以直接使用作者提供的demo仓库进行预览

git clone https://github.com/Zulko/eaglejs-demo.git

安装依赖项：

cd eaglejs-demo
npm install

作者也提供了在线预览的DEMO，通过Gif一起来看一看：

预览效果查看官网在线DEMO更好！

安装使用

• 安装

npm install --save eagle.js

或者

yarn add eagle.js

• 使用

Eagle.js是一个vue插件。需要在vue应用程序的主文件中使用eagle.js.

import Eagle from 'eagle.js'
// import animate.css for slide transition 
import 'animate.css'
Vue.use(Eagle)

• 最基本的用法

Eagle.js的基本组件是幻灯片和幻灯片。使用幻灯片作为mixin来编写幻灯片组件，其中可能包含多个幻灯片。幻灯片显示的一个非常基本的单个文件组件如下所示：

<template lang="pug">
 slide(:steps="4")
 p(v-if="step >= 1")
 | {{step}}
 p(v-if="step >= 2")
 | {{step}}
 p(v-if="step >= 3")
 | {{step}}
 p(v-if="step >= 4")
 | {{step}}
</template>
<script>
import { Slideshow } from 'eagle.js'
export default {
 mixins: [Slideshow]
}
</script>

• 默认

默认情况下，幻灯片显示会逐步导航，但您可以将行为更改为基于幻灯片：因此，如果您返回上一张幻灯片，则会转到第一步而不是最后一步。查看对比：

• Widgets

Eagle.js提供了几个可以在幻灯片中使用的有用小部件：

1. eg-modal
2. eg-code-block (code highlighted by highlight.js)
3. eg-code-comment
4. eg-toggle
5. eg-radio-button
6. eg-triggered-message

import Eagle, { Modal, CodeBlock } from 'eagle.js'
Eagle.use(Modal)
Eagle.use(CodeBlock)

• Presenter插件

可以使用presenter插件启用演示者模式：

// first, use plugin in your entry file
import Eagle, {Presenter} from eagle.js
Eagle.use(Presenter, {
 presenterModeKey: 'a' // default is p
})
// second, in your slideshow, declare two `data` property
{
 data: function () {
 return {
 childWindow: null,
 parentWindow: null,
 // .. the rest of your data
 }
 }
}

除以上介绍以外，你可以直接到Github查看详细的介绍以及使用方式，本文不做过多介绍！

总结

Eagle.js是一个高度自制的幻灯片框架，你可对其进行加强和改造，可以作为网页幻灯片的一个基础框架，有需要的朋友可以学习和使用！