介绍
Eagle.js是一个基于Vue.js的幻灯片框架,可以用来制作网页幻灯片,幻灯片不一定是PPT,可以作为网页演示的基础框架,因为其公开左右的API,那么你可以自己改造来实现更加强大的功能,支持用于Web演示的动画,主题,交互式小部件等!
![2b37173f35a3112da838ba232bf8229f.png](https://i-blog.csdnimg.cn/blog_migrate/5fc91cb305b056293e8f10683e82d177.jpeg)
Github
https://github.com/Zulko/eagle.js
相关特性
- 幻灯片系统建立在Vue.js之上
- 支持动画,主题,交互式小部件(用于Web演示)
- 在演示文稿中轻松重用组件,幻灯片和样式
- 轻量级核心模块和各种有用的扩展
- 所有API公开,最大可改造性
![fb2f4c080aa4c41b55f045316522ede0.png](https://i-blog.csdnimg.cn/blog_migrate/65f1f2f2b55a8e45246a8444acc41cb8.jpeg)
最重要的是,eagle.js的目标是提供一个简单且非常易于改造的API,这样你就可以摆脱常规,制作出你真正想要的幻灯片。
DEMO预览
你可以直接使用作者提供的demo仓库进行预览
git clone https://github.com/Zulko/eaglejs-demo.git
安装依赖项:
cd eaglejs-demonpm install
作者也提供了在线预览的DEMO,通过Gif一起来看一看:
![c17f675a4b33fa923a7f3c79ae110ae0.gif](https://i-blog.csdnimg.cn/blog_migrate/99ba9766852fab55aade8bff7e456b1c.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来编写幻灯片组件,其中可能包含多个幻灯片。幻灯片显示的一个非常基本的单个文件组件如下所示:
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}}
- 默认
默认情况下,幻灯片显示会逐步导航,但您可以将行为更改为基于幻灯片:因此,如果您返回上一张幻灯片,则会转到第一步而不是最后一步。查看对比:
![e69369cdeac0063f703abe3919329618.gif](https://i-blog.csdnimg.cn/blog_migrate/41c3234d672180411ae5f94a17dc524b.gif)
![8a535155d2cd7afee3471eb9933d6e8b.gif](https://i-blog.csdnimg.cn/blog_migrate/e881edaf6f77042b47eefea78b5eef8c.gif)
- Widgets
Eagle.js提供了几个可以在幻灯片中使用的有用小部件:
- eg-modal
- eg-code-block (code highlighted by highlight.js)
- eg-code-comment
- eg-toggle
- eg-radio-button
- eg-triggered-message
import Eagle, { Modal, CodeBlock } from 'eagle.js'Eagle.use(Modal)Eagle.use(CodeBlock)
- Presenter插件
可以使用presenter插件启用演示者模式:
// first, use plugin in your entry fileimport Eagle, {Presenter} from eagle.jsEagle.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是一个高度自制的幻灯片框架,你可对其进行加强和改造,可以作为网页幻灯片的一个基础框架,有需要的朋友可以学习和使用!