Sincinfo Common

公共组件、样式 用于sincinfo项目

涵盖：

• 主应用样式框架（包含大小可切换的导航菜单、面包屑导航栏、标签页管理等）
  • 取材于iview-admin
• 间隙按钮组（用于表格操作中）
• 日历组件
  • 取材于vue-calendar
  • 源码来自该项目早期代码
  • 由gxy00926156贡献
• 富文本编辑器
  • 来自tinymce的封装
  • 由lixufeng1992贡献
• 可拖拽表格
  • 取材于iview-admin
  • 由Doris-Wang贡献

使用

安装

npm install --save sincinfo-common

依赖

• vue
• vuex
• iview

引用

import Vue from 'vue'
import Vuex from 'vuex'
import iView from 'iview'

import 'iview/dist/styles/iview.css'
import 'sincinfo-common/dist/sincinfo-common.css'

import {SincinfoCommon, ScStore, ScHelper} from 'sincinfo-common'
import App from './App'
import router from './router'


Vue.use(iView)
Vue.use(Vuex)
Vue.use(SincinfoCommon)

// 状态管理
const store = new Vuex.Store({
  state: {
    ...ScStore.state, // 引用内置状态
    mainPageRoute: 'index', // 设定主页路由名称
    excludedRouteList: ['Page2-2'] // 添加tag例外路由，也可以通过再路由信息的meta中添加`untagged: true`达到相应效果
  },
  mutations: {
    ...ScStore.mutations // 引用内置状态
  }
})

router.beforeEach((to, from, next) => {
  iView.LoadingBar.start()
  ScHelper.beforeRoute(store, to)
  next()
  iView.LoadingBar.finish()
})

可用组件

• MainFrame 页面框架
• GapButtonGroup 按钮组
• Calendar 日历组件
• DragableTable 可拖拽表格
• MceView 富文本编辑器

MainFrame

• 包含了SidebarMenu以及BreadcrumbBar的组件，作为整体页面框架使用
• 使用样例参见HelloWorld.vue

支持的属性

• menu 详见下文
• logo 自定义logo 可选

{
  max: 'url to max logo',
  min: 'url to min logo'
}

• messageBox 消息按钮

{
  show: true, // 显示该按钮
  action: () => {}, // 按钮响应的操作
  count: 12 // 消息计数
}

• userDropdown 用户头像及下拉菜单

{
  username: 'User name',
  avatar: 'url to avatar', // 用户头像的url
  dropdown: [
    {
      name: 'xxx', // 菜单项显示的名字
      action: () => {} // 该项菜单的操作
    }
  ]
}

menu菜单数据格式

样例参见menu/index.js

标准格式

{
  name: 'MenuName', // 菜单显示的名字 必选
  route: 'RouteName', // 菜单对应路由的名字 有子菜单时此项不填
  icon: 'IconTypeName', // 菜单对应图标的名字 此项不填时图标随机
  children: [{...}, ...] // 子菜单 可选
}

使面包屑导航栏生效

样例参见路由信息定义router/index.js

标准格式 路由单元

{
  ..., // 其他路由信息
  meta: { // meta信息记录着业务层级相关信息
    name: 'name in web', // 当前路由所代表页面的名字
    plain: true/false, // 是否为虚拟节点 仅仅代表逻辑层级
    parent: parent_route // 上一层级的引用
  }
}

GapButtonGroup

支持的属性

• group

[
  {
    name: 'button name', // 按钮显示的文字
    action: () => {} // 按钮的点击事件
  },
  ...
]

• grid 一行显示的格子数

Calendar

支持的属性

• events 事件数组

[
  {
    date: '2017-11-11', // 事件发生的日期
    events: [
      {
        time: '11:11', // 事件发生的时间
        content: 'blablabla' // 事件描述
      },
      ...
    ]
  },
  ...
]

• onDayClick 响应点击事件

(day, events) => { // day 日期
  // ...
}

DragableTable

支持的属性

• refs 引用名
• columnsList 同iview中Table的columns
• tableData 同iview中Table的data
• start 开始拖动时响应的函数
• end 结束拖动时响应的函数
• choose 选中时响应的函数

// start/end/choose的函数签名同为，el为选中的元素的一个事件包装，详见Sortable.js
(el) => {}

MceView

支持的属性

• 支持v-model绑定富文本内容
• size 富文本编辑器的大小