# ccs-layout-ui

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

Latest version **1.0.0-test1** (published 2021-07-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install ccs-layout-ui
pnpm add ccs-layout-ui
yarn add ccs-layout-ui
bun add ccs-layout-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-test1 |
| Published | 2021-07-13 |
| First published | 2020-10-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 297.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | shaoli |
| Maintainers | shaoli |

## Links

- npm: https://www.npmjs.com/package/ccs-layout-ui
- npm.io page: https://npm.io/package/ccs-layout-ui

## Dependencies (7)

- [qs](https://npm.io/package/qs.md) ^6.6.0
- [node-sass](https://npm.io/package/node-sass.md) ^4.11.0
- [screenfull](https://npm.io/package/screenfull.md) ^3.3.3
- [sass-loader](https://npm.io/package/sass-loader.md) ^7.1.0
- [uglifyjs-webpack-plugin](https://npm.io/package/uglifyjs-webpack-plugin.md) 1.0.0
- [progress-bar-webpack-plugin](https://npm.io/package/progress-bar-webpack-plugin.md) ^2.1.0
- [babel-plugin-on-demand-loading](https://npm.io/package/babel-plugin-on-demand-loading.md) 0.0.9

## Recent versions

- 1.0.0-test1 (latest) — 2021-07-13
- 1.0.0-test — 2021-07-13
- 3.0.0 — 2021-07-13
- 1.0.0 — 2021-07-13
- 0.2.8 — 2021-03-04
- 0.2.7 — 2021-02-24
- 0.2.6 — 2021-02-24
- 0.2.5 — 2021-02-07
- 0.2.4 — 2021-01-28
- 0.2.3 — 2021-01-28
- 0.2.2 — 2021-01-27
- 0.2.1 — 2021-01-27
- 0.2.0 — 2021-01-25
- 0.1.9 — 2021-01-25
- 0.1.7 — 2020-12-16
- … 16 more at https://npm.io/package/ccs-layout-ui/versions

## README

### ccs-layout-ui

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

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

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

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

```

### 登录组件

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

具体使用如下：

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

  },
}
</script>
```

### 头部信息组件

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

具体使用如下：

```html
<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中

具体使用如下：

```html
<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中

具体使用如下：

```html
<template>
    <tags-view></tags-view>
</template>
```

### CcsLogOut方法调用

    CcsLogOut 方法注册全局和window上。

具体使用如下：

```js
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|-

---
_Source: https://npm.io/package/ccs-layout-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._