Front-global-components NPM

front-global-compoments

这里存放的是前端公共组件, 目的是实现前端组件的npm化。

组件列表

frame
inputSearch
lampNav
logo
myModal
rightNav
scaling
summaryList
table

安装

npm install front-global-components

使用

在入口文件如main.js中按需引入和使用

import {
    RightNav,
    LampNav,
    commonTable,
    scaling,
    myFrame,
    summaryList,
    Logo,
    inputSearch,
    myModal
} from 'front-gloabl-components'

Vue.use(RightNav)
Vue.use(LampNav)
Vue.use(commonTable)
Vue.use(scaling)
Vue.use(myFrame)
Vue.use(summaryList)
Vue.use(Logo)
Vue.use(inputSearch)
Vue.use(myModal)

frame

划分区块的框，用于存放内容

基本用法

<my-frame
:modal="frameModal"
:title="selectedItem.name">
    <template>
      <div class="detail">
        内容
      </div>
    </template>
</my-frame>

API

参数	说明	类型	默认值
modal	控制使用显示	Boolean	false
title	区块的名称	String	-

inputSearch

各模块左上角的全局搜索框

基本用法

<input-search
    @on-search="searchLampPole"
    @drawerShow="drawerShow"></input-search>

Event

事件名	说明	参数
on-search	用于搜索名称	返回的是输入的值
drawerShow	控制抽屉组件的显示	返回的是布尔值

lampNav

灯杆模块专用左侧列表组件

基本用法

<lamp-nav
  :headerData="headerData"
  :eventTypes="eventTypes"
  @on-search="searchLampPole"
  :currentTypeCode='currentTypeCode'
  :list="groupList"
  @setIndex="selectGroup"
  :initIndex="currentIndex"
  class="lampPole"
  :bottomHeight="bottomHeight"
>
</lamp-nav>

API

参数	说明	类型	默认值
bottomHeight	距离底部的距离	Boolean	0
list	数据列表	Array	[]
initIndex	选中的项的下标	Number	-2
currentType	当前的类型	String	'style1'
eventTypes	事件类型列表	Array	[]
shipData	车船调度里面的船只数据	Object	{repair: '0',work: '0',free: '0'}
headerData	相关的头部数据，用于切换	Object	{renderTitleList: [], renderTitle: ''}
currentTypeCode	当前类型的code值	String	'light_pole_lamp_holder'

Event

事件名	说明	参数
setIndex	点击列表某一项时的回调	参数是当前项和下标
return-current-item	返回当前项	当前项
on-search	用于搜索灯杆	参数为搜索值

logo

右下角的公司LOGO, 图片来自后台设置。

基本用法

<Logo></Logo>

myModal

视频识别模块的自定义弹出框

基本用法

<my-modal
    class="photo-seek"
    title="照片寻人"
    :value="currentState==='photoSeeking'"
    @on-click="closeModal"
>
    <slot></slot>
</my-modal>

API

参数	说明	类型	默认值
title	弹出框的标题	String	''
value	控制弹出框的显示	Boolean	false
width	弹出框宽度	Number	536

Event

事件名	说明	参数
on-click	点击关闭按钮的回调	-

rightNav

通用左侧列表

基本用法

<right-nav
:list="groupList"
@setIndex="onChildClick" :initIndex="currentIndex"></right-nav>

<right-nav
:list="noRepairList"
:shipData="shipData"
:currentType="currentType"
:headerData="headerData"
:initIndex="currentIndex"
@setIndex="changeState" ></right-nav>

API

参数	说明	类型	默认值
bottomHeight	距离底部的距离	Boolean	0
list	数据列表	Array	[]
initIndex	选中的项的下标	Number	-2
currentType	当前的类型	String	'style1'
shipData	车船调度里面的船只数据	Object	{repair: '0',work: '0',free: '0'}
headerData	相关的头部数据，用于切换	Object	{renderTitleList: [], renderTitle: ''}

Event

事件名	说明	参数
setIndex	点击列表某一项时的回调	参数是当前项和下标
return-current-item	返回当前项	当前项

scaling

左下角的伸缩框

基本用法

<scaling :height="300" :width="272">
    <template>
      <div class="msg">
        内容
      </div>
    </template>
</scaling>

API

参数	说明	类型	默认值
width	定义宽度	Number	272
height	定义高度	Number	300

summaryList

左下角数据一览，如设备各状态及对应数值

基本用法

<summary-list :summaryList="summaryList">
    <div slot="header">
      <div class="title sum-title">
        总灯杆数：
        <b class="num">{{total}}</b>
      </div>
    </div>
    <div slot="footer" class="mybtn">
      <Button type="success" long @click="statusTemp='gatewayControl';hideHandle()" >网关控制</Button>
      <Button type="success" long @click="showLoop" >照明回路</Button>
    </div>
</summary-list>

API

参数	说明	类型	默认值
summaryList	数据一览	Array	[]

table

基于 Vue 和 iView 的表格与分页组合

基本用法

<common-table
  :columns="columns"
  :data="list"
  :loading="loading"
  :page="page"
  :queryData="queryData"></common-table>

API

查看 iView table / 查看 iView page

参数	说明	类型	默认值
columns	表格列的配置描述	Array	[]
data	显示的结构化数据	Array	[]
loading	表格是否加载中	Boolean	false
page	分页对象,包含当前页码、数据总数、每页条数	Object	{pageSize: 10,total: 0,current: 1}