@wecity/doc-view-react

doc-view-react 使用说明

• 项目导入

  import '@wecity/doc-view-react/lib/index.css';
  import { DocView, DocSearch, DocSearchInput } from '@wecity/doc-view-react';
  
  <DocView modId={modId} nodeId={nodeId} />;
  <DocSearch modId={modId} docViewPath={docViewPath} />;
  <DocSearchInput searchPath={searchPath} />;
  

• 把导出的压缩包,解压到 public/docs 文件夹下

  以 create-react-app 为例

  开发环境下

  目录如下

  ｜-public
      ｜-docs
          |-VJSLSDFS1
          |-VJSLSDFS2
  ｜-src
  ｜-package.josn
  

  如果已经把组件导入并打包进了项目，完成 build 操作后的热导入

  目录如下

  ｜-docs
      |-VJSLSDFS1
      |-VJSLSDFS2
  ｜-static
  ｜-index.html
  

  Api

  DocView 文档页面组件

  参数	说明	是否必填	默认值
  modId	需要查看的的文档的模块 id(资源文件夹名字)	是	-
  nodeId	具体的某一篇文档，如果不填，会默认打开 modId 下找到的可浏览的第一份文档	否	null
  sideBarVisible	是否显示侧边栏，如果不填，则默认显示侧边栏	否	true
  titleVisible	是否显示侧边栏标题	否	true
  path	导入的文件路径 默认导入文件是存放在 public/docs 下, 若修改位置，需传入新的文件路径	否	-
  noSearch	是否文档右上角显示搜索框(默认有)	否	false
  searchPath	搜索页路由(DocSearch 组件所在的页面；若显示搜索框需要填搜索页面路由，否则会跳转错误)	否	'/'

  DocSearch 搜索页面组件

  参数	说明	是否必填	默认值
  modId	需要查看的的文档的模块 id(资源文件夹名字)	是	-
  path	导入的文件路径 默认导入文件是存放在 public/docs 下, 若修改位置，需传入新的文件路径	否	-
  docViewPath	文档页面路由(DocView 所在的页面)	是	'/'

  DocSearchInput 搜索框组件,用于搜索框的自定义摆放位置

  参数	说明	是否必填	默认值
  searchPath	搜索页路由(DocSearch 组件所在的页面)	是	'/'

  备注说明

  react 项目工程在开发模式需要开启支持读取 public 下文件夹和配置支持读取 md，UI 依赖 antd，网络请求依赖 axios

  以customize-cra为例子

  (config) => {
    //暴露webpack的配置 config ,evn
    const loaders = config.module.rules.find((rule) =>
      Array.isArray(rule.oneOf),
    ).oneOf;
    loaders.push({
      test: /\.md$/,
      use: 'raw-loader',
    });
    config.resolve.plugins = config.resolve.plugins.filter(
      (p) => p.constructor.name !== 'ModuleScopePlugin',
    );
    return config;
  };