eusp-ui

安装

npm install eusp-ui

使用

import EuspUI from "eusp-ui";
import 'eusp-ui/eusp-ui.css'
Vue.use(EuspUI);

组件

状态按钮组

使用

说明：有选中状态的按钮组，按钮重复点击取消选中状态
 <eu-toggle :toggleBtns='toggleBtns' @cancel='cancel'></eu-toggle>

参数           说明               类型      默认值
toggleBtns     按钮组信息         Array     []
disabled       是否开启文字提示   Boolean

方法：
事件名称    说明                  回调参数
cancel     按钮取消选中是的回调     无

toggleBtns 属性说明（请严格按照示例格式配置）

示例：[
    {
        value: "fuwei",
        lable: "1",
        icon: "el-icon-s-home",
        checkedState:true,//是否开启普通按钮模式
        callback: (item) => {
             console.log(item, "回调函数");
          },
         },
]
参数           说明                                类型
value         按钮值，点击时调用回调函数时会传入       String
lable         按钮内容                               String
icon          按钮图标                               icon
callback      点击按钮回调函数                        function
checkedState  按钮是否开启选中状态                    Boolean

底部集合框

使用

说明：可以底部抽屉跟标签页的二次封装

<eu-drawertab @close="onCloseDetails" :drawer="detailsLayer">附加内容</eu-drawertab>

参数           说明                 类型                默认值
tabPanes       标签页数组           Array                 []（必须有id,name字段）
drawer         控制抽屉展开         Boolean              false
height         窗体大小             Array                300

方法：
事件名称             说明                 回调参数
close            窗体关闭回调
tab-click        页签点击回调             页签对应下标的tabPanes值

时间获取框

使用

说明：可以获取传入时间的输入框内的值（小时）前后n小时之后的时间

<eu-input-time :time="time" :valueTime="valueTime" @getTime="getTime"></eu-input-time>

参数           说明                 类型                               默认值
time           想要操作的时间       String（yyyy-MM-dd HH:mm:ss）      当前时间（yyyy-MM-dd HH:mm:ss）
valueTime      间隔的时间           String                             8

方法：
事件名称    说明                 回调参数
getTime     时间值获取后触发     传入时间n小时之后的值

可拖拽窗口

使用

说明：基于LayerVue二次封装的弹出层，需在main.js中挂载
import LayerVue from "layer-vue";
import "layer-vue/lib/index.css";
Vue.use(LayerVue)

使用：
   <eu-draggable
      :visible="detailsLayer"
      @onClose="onCloseDetails"
      :spinning="spinning"
      title="数据详情"
      :area="[990, 550]"
    >

  <div>主</div>
  <div slot="acontent">附加内容 </div>
  </eu-draggable>

参数           说明                 类型            默认值
visible       控制弹窗显示          Boolean         false
title         弹框标题              String          ""
spinning      是否开启加载动画       Boolean         false
area          弹框面积               Array           [740, 600]
single        是否在拉起新弹框关闭   Boolean
zIndex        zIndex                Number

方法：
事件名称     说明                 回调参数
onClose     弹窗关闭时的回调

侧边栏容器

使用

说明：类似抽屉的侧边栏容器组件
<eu-sidebar :classInfo="'right'" :width="500" :btnShow="false"></eu-sidebar>

参数           说明                 类型                                    默认值
classInfo      容器位置             String （只有left，right两个可选值）      left
btnShow        是否展示拉开按钮      Boolean                                 true
width          侧边栏宽度            String                                   400

自适应卡片

使用

说明：可以适应父元素高度宽度的卡片，多个使用高度均分，宽度默认百分百，如没有父组件，直接设置样式高度即可
<eu-card style="height: 200px;" :title="'标题'"> </eu-card>

参数           说明            类型                默认值
title      卡片标题           String                ''

图表组件

使用

说明：基于echarts二次封装的图表，目前只支持部分常用图表
<eu-chart ref="eu" :width="'100%'" :height="'100%'" :data="data" :type="'Radar'"> </eu-chart>

参数           说明                类型                  默认值
width          宽度               String                '100%'
height         高度               String                '100%'
data        生成图表的数据         Object                 null
type          图表类型            String                'RoseFan'

type属性说明：
可选值         图表类型
RoseFan        玫瑰扇形图
Annular        百分比环形图
Columnar       柱状图
FoldLine       折线图
Radar          雷达图
Free           自由组合图
HorizontalBar  横向柱状图

data 属性说明 （请严格按照示例格式配置）

data属性说明：
类型：RoseFan
示例：[{
        name:'',
        value:10
       }]

类型：Annular
示例： {
        completed:5,
        total:10
      }

类型：Columnar
示例：  {
        xData: ["a", "b", "c", "e", "d"],//柱状图横坐标
        data: [
          {
            name: "测试",//图名称
            data: [39, 28, 42, 26, 25],//数值
          },
          {
            name: "测试2",
            color:'red',//图颜色
            data: [39, 28, 42, 26, 25],
          },
        ],
      };

类型：FoldLine
示例：  {
        xData: ["a", "b", "c", "e", "d"],//折线图横坐标
        data: [
          {
            name: "测试",//图名称
            smooth: true,//是否为平滑折线图
            showSymbol:true,//是否展示折线节点
            areaStyle:true,//是否需要区域面积
            data: [39, 28, 42, 26, 25],//数值
          },
          {
            name: "测试2",
            color:'#502c2c',//图颜色，必须为八位十六进制
            data: [39, 28, 42, 26, 25],
          },
        ],
      };

类型：Radar
示例： {
    //雷达图坐标系，同echerts官网配置相同
        indicator: [
          { text: "Indicator1" },
          { text: "Indicator2" },
          { text: "Indicator3" },
          { text: "Indicator4" },
          { text: "Indicator5" },
          { text: "Indicator6" },
        ],
        //图配置
        data: [
          {
            name: "测试",//图名称
            value: [39, 28, 42, 26, 25,0],//数据
          },
          {
            name: "测试2",
            color: "#ff0000",//图颜色
            areaStyle:true,//是否填充
            value: [39, 28, 42, 26, 25,0],
          },
        ],
      };
类型：Free（同折现图，柱状图配置相同，同时拥有两图的配置项）
示例：{
        xData: ["a", "b", "c", "e", "d"],
        data: [
          {
            name: "测试",
            type:'bar',
            data: [39, 28, 42, 26, 25],
          },
          {
            name: "测试",
            type:'bar',//图类型
            data: [39, 28, 42, 26, 25],
          },
          {
            name: "测试2",
            color: "#502c2c",//图颜色
            showSymbol:true,//是否展示折线节点
            data: [39, 28, 42, 26, 25],
          },
        ],
      };
类型：HorizontalBar （同柱状图配置相同，只是把xData改成yData）
示例：  {
        yData: ["a", "b", "c", "e", "d"],//柱状图横坐标
        data: [
          {
            name: "测试",//图名称
            data: [39, 28, 42, 26, 25],//数值
          },
          {
            name: "测试2",
            color:'red',//图颜色
            data: [39, 28, 42, 26, 25],
          },
        ],
      };

datas属性公用配置说明

x轴统一样式说明：
interval：步长，同官网用法相同
rotate，标签旋转角度，同官网用法相同
isBoundaryGap：同官网boundaryGap用法相同

grid统一样式说明：
grid：同官网用法相同

缩放控件统一样式说明：
dataZoom：同官网用法相同，只有Free、Columnar、FoldLine、HorizontalBar支持

注意

目前 eusp-ui 只适用于 vue2 的项目，后续会搞 vue3 的

eusp-ui 组件基于 element-ui 与 其他第三方插件 进行的二次封装，在使用前请确保项目中已安装 element-iu 等以其相关配置

[element-ui] https://element.eleme.cn/#/zh-CN

[echarts] https://echarts.apache.org/zh/index.html

[momentjs] https://momentjs.cn/docs/

[LayerVue] https://gitee.com/finalsummer/LayerVue

源码地址

[eusp-ui] https://gitee.com/qiuhuiya/eusp-ui