Socket
Socket
Sign inDemoInstall

@beisen-platform/guide

Package Overview
Dependencies
8
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @beisen-platform/guide

引导用户按照流程完成任务的导航条,可设步骤节点是否可点击


Version published
Weekly downloads
4
decreased by-63.64%
Maintainers
1
Install size
1.32 MB
Created
Weekly downloads
 

Readme

Source

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"
  1. 传入参数

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

    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} />
    		)
    	}
    

Keywords

FAQs

Last updated on 30 Apr 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc