@cui_xl/sning NPM

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%`	图的宽度