vic-common v0.0.143

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

(文档待完成)

• 示例代码请点这里