vic-common

0.0.143 • Public • Published

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

(文档待完成)

Readme

Keywords

none

Package Sidebar

Install

npm i vic-common

Weekly Downloads

1

Version

0.0.143

License

none

Unpacked Size

4.96 MB

Total Files

208

Last publish

Collaborators

  • silverage