guide 使用说明

项目运行

1. cnpm install 或 npm install cnpm使用教程

2. npm run dev （开发环境打包 port:8080）

3. npm run test （测试用例）

4. npm run build （生产环境打包）

guide参数

    {
        list:[
            {
                id:0  //非必须
                ,text:"同步入离职"  //节点显示文字
                ,status:"done"    //节点显示状态， "done"- 已完成， "doing"-当前步骤，"todo"-未开始
                ,isChecked:false  //选中当前节点
                ,disabled:false   //该节点是否被禁用
            }
        ]
        ,minScroll: 50 //当出现滚动条后，点击按钮时滚动距离，默认50px
        ,onClick: (val) => {console.info(val)} //节点的点击事件，会将相应节点数据抛出
    }

视图页隐藏头部参数

    
    hidePageHeader=1(或true) ,//根据url中参数判断是否显示头部，hidePageHeader=任意值则隐藏视图页头部
    前端在url中加入该参数来隐藏视图页头部

guide调用方法

1.安装npm组件包

npm install @beisen/guide --save-dev

2.引用组件

import Guide from "@beisen/guide"

3. 传入参数

   该参数为上述参数，传入方式使用: {...参数}

   const data = {
               list:[
                   {
                       id:0
                       ,text:"同步入离职"
                       ,status:"done"
                       ,isChecked:false
                       ,disabled:false
                   },
                   {
                       id:1
                       ,text:"计算"
                       ,status:"done"
                       ,isChecked:false
                       ,disabled:false
                   },
                   {
                       id:2
                       ,text:"差异分析"
                       ,status:"doing"
                       ,isChecked:true
                       ,disabled:false
                   },
                   {
                       id:3
                       ,text:"关联处理"
                       ,status:"done"
                       ,isChecked:false
                       ,disabled:false
                   },
                   {
                       id:4
                       ,text:"差异分析"
                       ,status:"todo"
                       ,isChecked:false
                       ,disabled:true
                   }
                   ,
                   {
                       id:5
                       ,text:"差异分析"
                       ,status:"todo"
                       ,isChecked:false
                       ,disabled:false
                   }
                   ,
                   {
                       id:6
                       ,text:"发布工资条"
                       ,status:"todo"
                       ,isChecked:false
                       ,disabled:false
                   }
               ]
               ,minScroll: 50 //点击按钮时滚动距离，默认50px
               ,onClick: (val) => {console.info(val)}
           }
   
   render () {
           return (
               <Guide {...data} />
           )
       }