1.0.4 • Published 3 years ago

@wecity/doc-view-react v1.0.4

Weekly downloads
-
License
-
Repository
-
Last release
3 years ago

doc-view-react 使用说明

  1. 项目导入

    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} />;
  2. 把导出的压缩包,解压到 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;
    };