Eusp-ui NPM | npm.io

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支持