ccs-layout-ui

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 基本参数

参数	描述	类型	默认值
applicationCode	当前应用的应用code	String	—
cookieCode	保存在cookie中的cookie键名，用于获取该存储的cookie	String	—
apiHttpUrl	接口网关地址	String	-
personalCenterMenu	个人中心菜单，配合slot使用	Array	-

---

• 登录组件 login 基本参数

参数	描述	类型	默认值
cookieCode	获取cookie的key	String	—
apiHttpUrl	登录接口的网关地址	String	—
title	登录界面标题	String	通福云开发户环境登录
submit	数据提交回调方法，submit存在tokeneName和loginUrl传过来无意义	Function	-

---

• 侧边栏 sidbar 基本参数

参数	描述	类型	默认值
menuRoutes	菜单列表	Array	—
router	是否开启菜单路由	Boolean	true
select	侧边栏选择后，返回两个参数均为路径	Function	-

---

• menuRoutes 属性

参数	描述	类型	默认值
path	路由地址	String	-
name	标题	String	-
icon	图标	String	-
children	子集	Array	-
meta	描述信息	Object	-
hidden	是否隐藏	Boolean	-
meta-node	el-menu的index	String	-