ccs-layout-ui v1.0.0-test1

ccs-layout-ui

ccs-layout-ui 是项目工程的一个公用组件，包含开发
登录界面、
头部信息、
侧边栏、
tab-view
和封装 CcsLogOut 外部方法供退出操作使用

ccs-layout-ui 引入 main.js引入

import Vue from 'vue'
import App from './App'

import CcsLayout from 'ccs-layout-ui'
Vue.use(CcsLayout)
...

登录组件

登录组件在 CcsLayout里面 use后会注册到Vue中

具体使用如下：

<template>
    <login title="登录标题" :submit="handleLogin"></login>
</template>
<script>
export default {
  methods: {
    /**
     * @params data 表单参数
     * @function callback 按钮loading回调函数
     */
    handleLogin(data, callback) {
      // 登录操作
    }
  },
  created () {

  },
}
</script>

头部信息组件

头部信息组件在 CcsLayout里面 use后会注册到Vue中

具体使用如下：

<template>
    <headerTop
      :applicationCode="appCode"
      :cookieCode="TokenKey"
      :personalCenterMenu="extendTemConfig"
      :apiHttpUrl="httpUrl">
      <div slot="tenantDashboard1">
        这是AA应用注入1对应的内容模块
      </div>
      <div slot="tenantDashboard2">
        这是AA应用注入2对应的内容模块
      </div>
    </headerTop>
</template>

<script >
export default {
    data() {
        return {
            TokenKey: 'token',
            extendTemConfig: [
                { //如果需要在个人中心左侧动态扩展选项时
                    id: 'tenantDashboard1',
                    label: 'AA应用注入1',
                },
                {
                    id: 'tenantDashboard2',
                    label: 'AA应用注入2',
                }
            ],
            appCode: 'BASIC_APPLICATION',//应用的code
            httpUrl: "http://loclhost/admin", //用于用户数据 auth删除token等请求的api
        }
    }
}
</script>

侧边栏组件

侧边栏组件在 CcsLayout里面 use后会注册到Vue中

具体使用如下：

<template>
      <sideBar :menuRoutes="menuRoutes" @select="select"></sideBar>
</template>
<script >
export default {
    data() {
        return {
            menuRoutes: [...],
        }
    },
    methods: {
        /**
         * @params path 当前路径
         * @function paths 选中到菜单组
         */
        select(path, paths) {
          console.error(path, paths)
        }
    }
}
</script>

tab-view组件

tab-view组件在 CcsLayout里面 use后会注册到Vue中

具体使用如下：

<template>
    <tags-view></tags-view>
</template>

CcsLogOut方法调用

CcsLogOut 方法注册全局和window上。

具体使用如下：

CcsLogOut()
// 或者
this.CcsLogOut()

具体参数

• 头部组件headerTop 基本参数

• 登录组件 login 基本参数

• 侧边栏 sidbar 基本参数

• menuRoutes 属性