简介
yunle-component-ppt 是一款基于 Vue.js 的 PowerPoint 插件，此插件支持多种切换方式，包括点击、悬停、键盘快捷键等方式。同时也支持多种动画效果，可以帮助用户制作出更加生动、有趣的演示文稿。
安装
你可以使用 npm 来安装 yunle-component-ppt：
- --- ------- ------------------- ------
使用
使用 yunle-component-ppt 非常简单，你只需要在你的 Vue 组件中通过 import 导入即可使用：
------ -------- ---- --------------------- -----------------
当你安装并成功导入后，你就可以在你的组件中通过使用 标签来使用此组件：
---------- -----------------------------
此处的 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-component-ppt 制作幻灯片的示例代码：
----------
----------
----------------
--------------------
-------------------
----------------------
-------------------------
--------------------
-----------------
-----------------------
---------------------------
---------------------------------------
-------------
-----------
--------
------ -------- ---- ---------------------
------ ------- -
----- --------
----------- -
--------
--
---- -- -
------ -
------- -
- -- ---
------ ----- ---------------------
--------- -
-
----- -------
-------- --------- ------------------- -----
--
-
----- --------
---- -------------------------------
-
-
--
- -- ---
------ -------
--------- -
-
----- -------
-------- -------------------- ----- ------ - ---------- -----------------
--
-
----- --------
---- -------------------------------
-
-
--
- -- ---
------ --------
--------- -
-
----- -------
-------- ------ --- --- -------------------------- --- ----------
--
-
----- --------
---- -------------------------------
-
-
--
- -- ----
------ -----
--------- -
-
----- -------
-------- ----
--
-
----- --------
---- -------------------------------
-
-
-
-
-
--
-------- -
----------- ------- -
----------------- ------- - -- ------
--
----------------- -- -
-------------------
-
-
-
---------
-------
-- ----------------------------------- --
---------- ------------- -
------ -----
-------- ---
-
---------- ------------------- -
-------- ----
------- - ----
-
---------- ------------------------------ -
-------- ---
------- --
-
---------- ------------ ---- -
----------------- -----
-
---------- ------------------ ---- -
----------------- -----
-
---------- ------------- -
------- ----
-
---------- ------------- ---- -
----------------- -----
-
---------- ------------- ---------------- -
----------------- ---- ----
-
---------- ------------- --------------- -
----------------- ----- ----
-
--------通过这个示例代码，你应该可以掌握 yunle-component-ppt 的使用方法，如果你还有不懂之处，可以查看官方文档或者阅读源码，源码中也有详细的注释和文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f85238a385564ab6c85