简介
yunle-component-ppt 是一款基于 Vue.js 的 PowerPoint 插件，此插件支持多种切换方式，包括点击、悬停、键盘快捷键等方式。同时也支持多种动画效果，可以帮助用户制作出更加生动、有趣的演示文稿。
安装
你可以使用 npm 来安装 yunle-component-ppt：
$ npm install yunle-component-ppt --save
使用
使用 yunle-component-ppt 非常简单，你只需要在你的 Vue 组件中通过 import 导入即可使用：
import YunlePpt from 'yunle-component-ppt' Vue.use(YunlePpt)
当你安装并成功导入后，你就可以在你的组件中通过使用 <yunle-ppt> 标签来使用此组件：
<yunle-ppt :slides="slides"></yunle-ppt>
此处的 slides 是一个数组对象，其中每个对象代表一个幻灯片，例如：
-- -------------------- ---- -------
------- -
-
------ ------
--------- -
-
----- -------
-------- ----------
--
-
----- --------
---- --------------------------
-
-
--
-
------ ------
--------- -
-
----- -------
-------- ----------
--
-
----- --------
---- --------------------------
-
-
-
-Props
slides
- 描述：幻灯片的数据，数组对象格式
- 类型：Array
- 必须：是
- 默认值：[]
showFooter
- 描述：是否显示页脚
- 类型：Boolean
- 必须：否
- 默认值：true
showIndex
- 描述：是否显示页码
- 类型：Boolean
- 必须：否
- 默认值：true
showProgress
- 描述：是否显示进度条
- 类型：Boolean
- 必须：否
- 默认值：true
showSlideNumber
- 描述：是否显示幻灯片编号
- 类型：Boolean
- 必须：否
- 默认值：false
mouseWheel
- 描述：是否允许鼠标滚轮切换
- 类型：Boolean
- 必须：否
- 默认值：true
keyboard
- 描述：是否允许键盘切换
- 类型：Boolean
- 必须：否
- 默认值：true
transition
- 描述：幻灯片切换时的动画效果
- 类型：String
- 必须：否
- 默认值：'slide'
目前 yunle-component-ppt 支持的动画效果包括：
| 值 | 描述 |
|---|---|
| 'none' | 无动画 |
| 'fade' | 淡入淡出 |
| 'slide' | 滑动 |
| 'convex' | 凸出 |
| 'concave' | 凹入 |
| 'zoom' | 缩放 |
事件
yunle-component-ppt 提供了两种事件：
- slide-change：每次幻灯片切换时触发的事件，返回当前幻灯片的索引号
- presentation-close：在最后一张幻灯片上，按 ESC 键触发的事件
你可以通过在 <yunle-ppt> 标签上绑定事件来使用这些事件：
<yunle-ppt :slides="slides" @slide-change="slideChange"></yunle-ppt>
methods: {
slideChange (index) {
console.log(`切换到第 ${index + 1} 张幻灯片`)
}
}示例代码
下面是一个使用 yunle-component-ppt 制作幻灯片的示例代码：
-- -------------------- ---- -------
----------
----------
----------------
--------------------
-------------------
----------------------
-------------------------
--------------------
-----------------
-----------------------
---------------------------
---------------------------------------
-------------
-----------
--------
------ -------- ---- ---------------------
------ ------- -
----- --------
----------- -
--------
--
---- -- -
------ -
------- -
- -- ---
------ ----- ---------------------
--------- -
-
----- -------
-------- --------- ------------------- -----
--
-
----- --------
---- -------------------------------
-
-
--
- -- ---
------ -------
--------- -
-
----- -------
-------- -------------------- ----- ------ - ---------- -----------------
--
-
----- --------
---- -------------------------------
-
-
--
- -- ---
------ --------
--------- -
-
----- -------
-------- ------ --- --- -------------------------- --- ----------
--
-
----- --------
---- -------------------------------
-
-
--
- -- ----
------ -----
--------- -
-
----- -------
-------- ----
--
-
----- --------
---- -------------------------------
-
-
-
-
-
--
-------- -
----------- ------- -
----------------- ------- - -- ------
--
----------------- -- -
-------------------
-
-
-
---------
-------
-- ----------------------------------- --
---------- ------------- -
------ -----
-------- ---
-
---------- ------------------- -
-------- ----
------- - ----
-
---------- ------------------------------ -
-------- ---
------- --
-
---------- ------------ ---- -
----------------- -----
-
---------- ------------------ ---- -
----------------- -----
-
---------- ------------- -
------- ----
-
---------- ------------- ---- -
----------------- -----
-
---------- ------------- ---------------- -
----------------- ---- ----
-
---------- ------------- --------------- -
----------------- ----- ----
-
--------通过这个示例代码，你应该可以掌握 yunle-component-ppt 的使用方法，如果你还有不懂之处，可以查看官方文档或者阅读源码，源码中也有详细的注释和文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f85238a385564ab6c85