vic-common
本项目内存放封装的公共界面组件
配置npm私服地址
输入命令可切换公有npm/私服npm环境:
npm set registry http://192.168.151.68:8001 //切换为私服环境npm set registry https://registry.npmjs.org //切换为公有npm环境npm config get registry //查看当前npm服务器地址
引入项目方式
- 切换到npm私服后,输入
npm install vic-common
即可安装。 - 安装完毕后,用
import 'vic-common/lib/**/*.*';
的方式引入项目即可。
组件
Ant Design
为Ant Design
组件的分模块引入,以及与NornJ
模板的结合做的一个简单的封装。使用方法如下:
; //按`vic-common/lib/components/antd/组件名`引入组件;;... Component ... { //在nj模板中,用"ant-*"为组件名使用即可。各组件的用法请参考Ant design官网 return nj` <ant-Table class={styles.decisionTreeTable} {columns} dataSource={decisionTreeData} pagination={false} rowKey="attrName" size={small} bordered {scroll} ref="decisionTreeTable" /> `; }
支持的组件目录
-
ant-Alert
-
ant-Breadcrumb
-
ant-Button
-
ant-Card
-
ant-Cascader
-
ant-Checkbox
-
ant-Collapse
-
ant-DatePicker
-
ant-Form
-
ant-Icon
-
ant-Input
-
ant-Menu
-
ant-Message
-
ant-Modal
-
ant-Notification
-
ant-Progress
-
ant-Radio
-
ant-Select
-
ant-Slider
-
ant-Switch
-
ant-Table
-
ant-Tabs
-
ant-Tooltip
-
ant-Transfer
-
ant-TreeSelect
-
(其他的antd组件待添加)
-
示例代码请点这里
-
各组件的详细使用方式请看Ant Design 官方文档
ECharts
为ECharts
图表的分模块引入,以及与NornJ
模板的结合做的一个简单的封装。使用方法如下:
; //按`vic-common/lib/components/ECharts/组件名`引入组件;;... Component state = option: //配置项,具体参考echarts图表的option如何配置 grid: y: 20 x: 40 y2: 25 x2: 30 data: //数据,相当于series参数,具体参考echarts图表的series如何配置 ... ; { //在nj模板中,用"ec-*"为组件名使用即可 return nj` <ec-BarChart {option} {data} /> `thisstate; }
支持的组件目录
-
ec-BarChart
-
ec-GaugeChart
-
ec-GraphChart
-
ec-LineChart
-
ec-PieChart
-
ec-RadarChart
-
ec-SankeyChart
-
ec-ScatterChart
-
ec-TreeMapChart
-
ec-WordCloudChart
-
(其他的echarts图表组件待添加)
-
示例代码请点这里
-
各图表的详细使用方式请看Echarts 官方文档
DataGrid
(文档待完成)
- 示例代码请点这里
DatePicker
(文档待完成)
- 示例代码请点这里