页面使用

<display-page></display-page>

<script>
  import DisplayPage from 'iteach-cloudppt-display-page';

  export default {
    name: 'App',

    components: {
      'display-page': DisplayPage
    }
  }
</script>

props参数

const pageModulesConfig = [
  {
    id: 'part1',
    name: '课前热身',
  }, {
    id: 'part2',
    name: '知识讲授',
  }, {
    id: 'part3',
    name: '课中训练',
  }, {
    id: 'part4',
    name: '课堂检测',
  }
];

const componentProps = {
  // 页面JSON 支持动态渲染
  projectData: {
    type: Object,
    default: () => ({})
  },

  // 模块配置信息 支持动态渲染
  pageModules: {
    type: Array,
    default: () => (pageModulesConfig)
  },

  // 是否使用底部操作工具
  useFooterTool: {
    type: Boolean,
    default: true
  },

  // 是否使用点击切换页面
  useClickChangePage: {
    type: Boolean,
    default: true
  }
};

refs methods

const refsMethods = {
  /**
    * @param moduleId: moduleId in pageModules[item]
    * @param index: index in currentModulePages( pages.filter(item => item.id === moduleId) )
  */
  changeModulePage(moduleId, index = 0) {

  }
}

组件介绍

支持iteach在线编辑的预览模式，是iteach-cloudppt-h5工程中的display-page.vue的web-components

版本

1.0.0 抽离预览组件，上传npm
1.0.1 添加点击ppt阻止换页功能，并为外界提供控制翻页方法