0.0.16 • Published 7 years ago
nsky-popup v0.0.16
nsky-popup 弹窗/漏斗组件
Nsky Common Component
Screenshots
install
dnpm install nsky-popup --save-devUsage
import NskyPopup from 'nsky-popup'
import React from 'react'
import ReactDOM from 'react-dom'
import 'nsky-popup/dist/index.css'
ReactDOM.render(<NskyPopup />, container)API
props
| name | type | default | description |
|---|---|---|---|
| isShow | Boolean | false | 当前popup是否显示 |
| metrics | Array | [] | popup数据配置 |
| superInfo | Object | {} | 当前点击的数据的信息, {location, value, id} |
| metricType | Array | [] | 指标map，用于通过id查找名字，比如id=3 -> name=订单 |
| fetchFunnel | Func | null | promise function，请求漏斗数据 |
| fetchTerm | Func | null | promise function，请求同比环比数据 |
| fetchHourly | Func | null | promise function，请求24小时实时数据 |
| closeFunc | Func | null | 闭关当前popup方法 |
| className | String | '' | class |
metrics配置
| name | type | default | description |
|---|---|---|---|
| icon | String | '' | iconfont相应icon |
| name | String | '' | tab的名称 |
| lists | Array | [] | tab内部数据数组 |
metrics配置 配置示例
[{
icon: 'filter',
name: '漏斗',
type: 'filter', // filter, list filter展示value和rate, list展示value/mom/yoy
metrics: [{
id: '3',
name: '呼叫订单量', // 可选
isTitle: true, // 是否是名称，名称不需要点击，背景是灰色
}]
}, {
icon: 'filter',
name: '漏斗',
type: 'filter', // filter, list filter展示value和rate, list展示value/mom/yoy
metrics: [{
id: '3',
name: '呼叫订单量', // 可选
isTitle: true, // 是否是名称，名称不需要点击，背景是灰色
}]
}]依赖外部
utils/utils-data-process actions/xxx iconfont
Development
npm install
npm run example
npm run css-watch