sning 使用说明

项目常用组件抽取封装，仅针对特殊业务情况。

安装

npm i @cui_xl/sning

引入

整体引入

import sning from '../packages/index'
Vue.use(sning)

单个组件按需引入

import {
  SningLayout,
  SningTdChart
} from '../packages/index'
Vue.use(SningLayout)
Vue.use(SningTdChart)

组件列表

SningLayout

用于生成页面UI框架

使用方式

<sning-layout :no-header="false"
          :no-sidebar="false"
          :header-fixed="true"
          :sidebar-fixed="true"
          :sidebar-collapsed="true"
          :sidebar-collapsed-type="'top'"
          :defaultSidebarCollapsed="true"
          :side-menu="menu">
          <md-header slot="header"/>
          <router-view />
  </sning-layout>

配置

sning-layout

属性 | 类型 | 默认值 | 描述

• | - | - | - type | String | top | 布局结构，top 为上下结构，side 为左右结构 no-header | Boolean | false | 隐藏头部 no-sidebar | Boolean | false | 隐藏侧边栏 header-fixed | Boolean | true | 头部是否固定 sidebar-fixed | Boolean | true | 侧边栏是否固定 sidebar-collapsed | Boolean | false | 侧边栏是否可收缩 sidebarCollapsedType | String | top | 可选值top 、 side defaultSidebarCollapsed | Boolean | false | 默认侧边栏收缩，默认展开 side-menu | Array | [] | 侧边栏列表 title | String | -- | 头部标题 subTitle | String | -- | 侧边栏顶部标题

side-menu 侧边栏菜单每项的属性,参考uxcool的menu配置

属性 | 类型 | 默认值 | 描述

• | - | - | - key | String | -- | 唯一标记 name | String | -- | label icon | String | -- | 图标（仅支持xu-cool icon） path | String | -- | 菜单路由名 type | String | -- | submenu children | Array | -- | 子菜单列表, 父级添加type: 'submenu' show | Boolean | false | 是否显示

slot 插槽

属性 | 描述

• | - header | 自定义头部 sidebar | 自定义侧边栏

SningTdChart

使用 echart + ux-table 生成图和表格的数据展示形式

使用方式

<ux-row :gutter="20">
  <ux-col v-for="(item, idx) in list"
          :key="idx"
          :span="item.span"
          :style="{height: item.height}">
    
    <sning-td-chart :params="item.params"
                :name="item.name"
                :struct="item.struct"
                :unit="item.unit"
                :xAxisData="item.xAxis"
                :seriesData="item.seriesData"
                :chartHeight="item.chartHeight"
                :tableHeight="item.tableHeight"
                :tableScrollHeight="item.tableScrollHeight"
                :chartWidth="item.chartWidth"
                :tableWidth="item.tableWidth"
                :showMsg="item.showMsg"
                :columns="item.columns"
                :tableData="item.tableData"
                :tooltipInfo="item.tooltipInfo"/>
    <br>
  </ux-col>
</ux-row>

参数

属性 | 类型 | 默认值 | 描述

• | - | - | - name | String | -- | 图表标题 params | String | -- | 图表入参 span | Number | -- | 结合ux-row、ux-col设置比例 tooltipInfo | String | '' | 对标题进行说明的tooltip columns | Array | -- | ux-table 表头列，[{key: '', title: ''}] tableData | Array | -- | ux-table 数据 chartHeight | String | '220px' | 图的高度， struct 为 up-down 时有效 tableHeight | String | '100px' | 表的高度， struct 为 up-down 时有效 tableScrollHeight | Number | 50 | ux-table 滚动高度 struct | Sting | up-down | 图表展示结构，up-down 上下结构， left-right 左右结构 xAxis | Array | [] | 图x轴数据 seriesData | Array | [] | 数组的每项是一个对象，{name: '', data: []} unit | String | '' | 数据单位 chartWidth | String | 60% | 图的宽度 tableWidth | String | 40% | 图的宽度