main.js 中引用 WinCard：
import { createApp } from "vue";
import App from "./App.vue";
import WinCard from "lyx-wincard";
import "wincard/dist/wincard.css";
createApp(App)
.use(WinCard)
.mount("#app");vue 中使用：
<!-- 素材页编辑 -->
<PPTEditor :slide="slide" @onSave="onSave" />
<!-- 预览 -->
<ScreenView :slide="slide" @pagePrev="pagePrev()" @pageNext="pageNext()" />slide数据示例：
// 素材页
{
id: "39FFFBBE2B08D1CFD8FCA24DE655B35B",
type: "element",
viewportRatio: 0.5625,
elements: [
{
name: "形状1",
type: "shape",
id: "4cbRxp",
left: 0,
top: 200,
width: 546,
height: 362.5,
viewBox: 200,
path: "M 0 0 L 0 200 L 200 200 Z",
fill: "#5b9bd5",
fixedRatio: false,
opacity: 0.7,
rotate: 0
},
{
name: "形状2",
type: "shape",
id: "ookHrf",
left: 0,
top: 0,
width: 300,
height: 320,
viewBox: 200,
path: "M 0 0 L 0 200 L 200 200 Z",
fill: "#5b9bd5",
fixedRatio: false,
flipV: true,
rotate: 0
},
{
name: "文本1",
type: "text",
id: "idn7Mx",
left: 355,
top: 65.25,
width: 585,
height: 188,
lineHeight: 1.2,
content:
"<p><strong><span style='font-size: 112px'>PPTIST</span></strong></p>",
rotate: 0,
defaultFontName: "Microsoft Yahei",
defaultColor: "#333"
},
{
name: "文本2",
type: "text",
id: "7stmVP",
left: 355,
top: 253.25,
width: 585,
height: 56,
content:
"<p><span style='font-size: 24px'>基于 Vue 3.x + TypeScript 的在线演示文稿应用</span></p>",
rotate: 0,
defaultFontName: "Microsoft Yahei",
defaultColor: "#333"
},
{
name: "线条",
type: "line",
id: "FnpZs4",
left: 361,
top: 238,
start: [0, 0],
end: [549, 0],
points: ["", ""],
color: "#5b9bd5",
style: "solid",
width: 2
}
],
background: {
type: "solid",
color: "#ffffff"
}
}
// 听写页
{
id: "39FFFBBE2B08D1CFD8FCA24DE655B35B",
type: "listen",
viewportRatio: 0.5625,
elements: [],
listenWords: [
{
id: "39FED7308B47FE07436EC33844DE78F5",
name: "苹果1",
file: "TeachPageFile/EFF4D19486842BDF411839B61AE22B71.mp3",
extention: "mp3",
pageWordID: "39FFFC10573FB3AD0BC87C17A08E2AD5"
},
{
name: "121212",
id: "39FECC5CDF3022C43C032688958B16BF",
file: "TeachPageFile/28D7326F7772879CDCF564A2A755B264.m4a",
extention: "m4a",
pageWordID: "39FFFC10574015C89FAEF9355BB5E7CB"
},
{
name: "121212",
id: "39FECC5CDF3022C43C032688958B16BF",
file: "TeachPageFile/28D7326F7772879CDCF564A2A755B264.m4a",
extention: "m4a",
pageWordID: "39FFFC65054430D68B36F090A1875989"
},
{
name: "测试",
id: "39FEBCA9648BE111E08E1B4CD1C5104E",
file: "TeachPageFile/814F94E1DBA66566099B0787FA7678D7.mp4",
extention: "mp4",
pageWordID: "39FFFC654B2BDC6027B84AE7E1021F3A"
},
{
name: "敦实",
id: "39FEBCA933D981CE5D2A348A65ABC0DB",
file: "TeachPageFile/CA7DC5A89DD86B2DD66B8D996EAB67E3.mp3",
extention: "mp3",
pageWordID: "39FFFC654B2B2A9804F1F6914BF1D786"
}
],
background: {
type: "solid",
color: "#ffffff"
}
}
// 跟读页
{
id: "39FFFBBE2B08D1CFD8FCA24DE655B35B",
type: "follow",
viewportRatio: 0.5625,
elements: [],
follow: {
src: "ElementFile/435F9C581336C2582C98A7708699585D.mp4"
},
background: {
type: "solid",
color: "#ffffff"
}
}【注】：支持数据导入和导出
import { version } from "wincard";
// 获取插件支持数据版本号，与使用的slide数据的版本号进行比较，当不支持时，需要对相应的数据进行相应的处理
// 1.0.0，数据当中没有版本号的数据我们这里统称为1.0.0版本数据
// 针对1.0.0的数据，其中的步骤数据字段steps没有了，统一使用animations，事件的里的数据结构也进行的调整和anmaitions的数据结构保持一致
// 相关处理代码示例
export const dealAnimationData = (slide: Slide) => {
if (slide.steps) {
const steps = slide.steps;
delete slide.steps;
let animations: PPTAnimation[] = [];
// 当步骤中存在进入与退出动画时，只管进入动画，舍弃退出动画
steps.forEach(actions => {
const _animation = getAnimations(actions || []);
animations = animations.concat(_animation);
});
slide.animations = animations;
}
slide.elements.forEach(element => {
element.actions = getAnimations((element.actions as unknown || []) as PPTElementAction[]);
});
return slide;
};
const getAnimations = (actions: PPTElementAction[]) => {
const animations: PPTAnimation[] = [];
actions.forEach((item, index) => {
const type = item.inAni ? "in" : item.outAni ? "out" : "in";
animations.push({
id: createRandomCode(),
elId: item.target,
ani: (type === "in" ? item.inAni : item.outAni) || "",
type,
path: type === "in" ? item.inPath : item.outPath,
duration: item.duration || 0,
trigger: index === 0 ? "click" : "meantime"
});
});
return animations;
};import "node_modules/wincard/dist/font.css";// 引入mathjax
// 处理批量初始化问题
const callbackArr: (() => void)[] = [];
let isInit = true;
export const initMathJax = (config = {}, callback?: () => void) => {
if (window.MathJax) return callback && callback();
if (isInit) {
isInit = false;
const script = document.createElement("script");
script.src = "./mathjax/3.2.2/tex-svg-full.js";
script.async = true;
document.head.appendChild(script);
// 没有找到好的配置解决办法，这里直接在localstorage里存入配置值
// localStorage.setItem("MathJax-Menu-Settings", '{"renderer":"svg"}');
const defaultConfig = {
loader: { load: ["[tex]/unicode", "[tex]/mhchem"] },
tex: {
packages: { "[+]": ["unicode", "mhchem"] },
inlineMath: [['\\(', '\\)']],
displayMath: [
['$$', '$$'],
['\\[', '\\]']
],
processEscapes: true
},
options: {
enableMenu: false,
menuOptions: {
settings: {
renderer: "svg"
}
}
},
startup: {
pageReady: () => {
callback && callback();
if (callbackArr.length > 0) {
for (const c of callbackArr) {
c();
}
}
}
}
};
const mergeConfig = Object.assign({}, defaultConfig, config);
window.MathJax = mergeConfig;
} else {
if (callback) callbackArr.push(callback);
}
};
initMathJax(); SORT = "sort", // 排序
SAVE = "save", // 保存
RENAME = "rename", // 重命名
PREVIEW = "preview", // 预览
STICKUP = "stickup", // 粘贴
SHOW_HIDE = "show_hide", // 显示或隐藏
IMPORT_PPT = "import_ppt", // 导入ppt
CREATE_PAGE = "create_page", // 创建页
GAME_CONFIG = "game_config", // 游戏配置
HANDOFF_PAGE = "handoff_page", // 切换页
INSERT_VIDEO = "insert_video", // 插入视频
UPDATE_VIDEO = "update_video", // 更换视频
SAVE_ELEMENT = "SAVE_ELEMENT", // 保存素材
SAVE_TEMPLATE = "save_template", // 保存模板
CREATE_FOLDER = "create_folder", // 创建文件夹
SELECT_HYPERLINK = "select_hyperlink", // 选择超链接
DELETE_HYPERLINK = "delete_hyperlink", // 删除超链接
REMOVE_CARD_PAGE = "remove_card_page", // 删除卡或者页
LESSON_PLAN_DESIGN = "lesson_plan_design", // 教案设计
APPLY_BACKGROUND = "apply_background", // 当前背景应用于所有幻灯片