从 Markdown 生成演示文稿 – mark-display

从 Markdown 生成演示文稿 – mark-display
插件名称 mark-display
发布时间 2021年8月23日
插件作者 Jinjiang

mark-display 是一个 Vue.js 组件,可从基于 Markdown 的幻灯片动态生成演示文稿。

由标记的降价解析库提供支持。

更多功能:

  • 触摸友好。需要Hammer.js。
  • 允许将演示文稿导出为 PDF 文件。

安装和下载:

# NPM
$ npm install vue-mark-display --save

基本用法:

安装并导入包。

import MarkDisplay from "vue-mark-display";

使用模板中的标记显示组件。

<template>
  <mark-display
    :markdown="markdown"
    @title="setTitle"
    更多的PROPS在这里
  ></mark-display>
</template>

使用 Markdown 编写幻灯片。

const markdown = `# Hello World
----
----这是 Vue 标记显示`;

从幻灯片生成演示文稿。

export default {
  components: { MarkDisplay },
  data() {
    return { markdown };
  },
  methods: {
    setTitle({ title }) {
      document.title = title;
    }
  }
};

可用道具。

markdown: { type: String },
src: { type: String },
page: { type: Number },
baseUrl: { type: String },
theme: { type: String },
autoFontSize: { type: Boolean, default: false },
autoBaseUrl: { type: Boolean, default: false },
autoBlankTarget: { type: Boolean, default: false },
keyboardCtrl: { type: Boolean, default: false },
urlHashCtrl: { type: Boolean, default: false },
supportPreview: { type: Boolean, default: false }

事件处理程序。

// 当幻灯片改变
@change="func({ from, to })

// 当标题改变
@title="func({ title })"

API 方法。

  • goto(page: number):转到特定幻灯片
  • goNext():转到下一张幻灯片
  • goPrev():回到上一张幻灯片
  • goFirst():转到第一张幻灯片
  • goLast():转到最后一张幻灯片