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服务器地址

引入项目方式

1. 切换到npm私服后，输入npm install vic-common即可安装。
2. 安装完毕后，用import 'vic-common/lib/**/*.*';的方式引入项目即可。

组件

Ant Design

为Ant Design组件的分模块引入，以及与NornJ模板的结合做的一个简单的封装。使用方法如下：

import 'vic-common/lib/components/antd/card';  //按`vic-common/lib/components/antd/组件名`引入组件
import 'vic-common/lib/components/antd/tabs';
import 'vic-common/lib/components/antd/table';
...

class DatePickerPage extends React.Component {
  ...
  render() {  //在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模板的结合做的一个简单的封装。使用方法如下：

import 'vic-common/lib/components/ECharts/lineChart';  //按`vic-common/lib/components/ECharts/组件名`引入组件
import 'vic-common/lib/components/ECharts/barChart';
import 'vic-common/lib/components/ECharts/treeMapChart';
...

class DatePickerPage extends React.Component {
  state = {
    option: {  //配置项，具体参考echarts图表的option如何配置
      grid: {
        y: 20,
        x: 40,
        y2: 25,
        x2: 30
      }
    },
    data: [  //数据，相当于series参数，具体参考echarts图表的series如何配置
      ...
    ]
  };

  render() {  //在nj模板中，用"ec-*"为组件名使用即可
    return nj`
      <ec-BarChart {option} {data} />
    `(this.state);
  }
}

支持的组件目录

• ec-BarChart

• ec-GaugeChart

• ec-GraphChart

• ec-LineChart

• ec-PieChart

• ec-RadarChart

• ec-SankeyChart

• ec-ScatterChart

• ec-TreeMapChart

• ec-WordCloudChart

• (其他的echarts图表组件待添加)

• 示例代码请点这里

• 各图表的详细使用方式请看Echarts 官方文档

DataGrid

(文档待完成)

• 示例代码请点这里

DatePicker

(文档待完成)

• 示例代码请点这里