1.0.76-beta.6 • Published 1 year ago
ngx-nx-top-menu v1.0.76-beta.6
ngx-ty-menu 左侧菜单组件使用方法:
- npm i ngx-ty-menu --save
- 在app.module.ts中添加代码:
...
// add ++
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
// add ++
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
...
imports: [
...
// add ++
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient]
}
}),
]
})
...
- 引入菜单module
import { TopMenuModule } from 'ngx-ty-top-menu';
- 组件引用
<top-menu
[uerList]="uerList"
[menuList]="topMenuList"
[userName]="loginName"
(themeChange)="themeChange($event)"
(logout)="logout()"
[optionsContent]="optionsContent"
(languageChange)="changeLanguage($event)"
[theme]="isTheme"
(searchApi)="searchApi($event)"
[listOfData]="listOfData"
[total]="total"
>
<div class="logo">
<div class="logo-img"></div>
</div>
<i class="avatar" nz-icon nzType="user" nzTheme="outline"></i>
</top-menu>
- 自定义下方配置实例
<top-menu
[uerList]="uerList"
[menuList]="topMenuList">
<!-- 下拉框自定义 -->
<ng-template #optionsContent>
<ul>
<li>自定义</li>
</ul>
</ng-template>
<!-- logo -->
<div class="logo">
<div class="logo-img"></div>
</div>
<!-- user图片 -->
<i class="avatar" nz-icon nzType="user" nzTheme="outline"></i>
</top-menu>
- 组件data数据请求menu接口
this._http.post('menus?c=' + new Date().getTime(), {}, this.ctx_auto).subscribe(data => {
if (data && data.status === 200) {
data.data.map(item => {
if (item.option) {
this.uerList.push(item);
} else {
this.topMenuList.push(item);
}
});
}
});
- 组件data数据格式
data = [
{
id: 1,
title: '测试一级菜单1', //名称
link: '/top-menu', // 跳转路由
selected: true, // 是否选中
},
]
- 组件api:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
menuList | 【必填】菜单数据数组 | any[] | - |
theme | 【非必填,当前仅支持白色版】主题颜色 | 白色版:'light'黑色版:'black' | light |
searchList | 【非必填】搜索框下拉列表数组 | ||
searchKey | 【非必填】搜索输入框下拉列表值 | ||
placeholder | 【非必填】搜索输入框placeholder | ||
searchValue | 【非必填】搜索输入框值 | ||
uerList | 【必填】点击用户下拉菜单选项 | ||
userName | 【必填】用户名 | ||
language | 【非必填】国际化参数 | 中文:'zh'英文:'en' | zh |
optionsContent | 【非必填】自定义配置项 | TemplateRef | 我的消息、language、帮助文档、主题、退出 |
(searchKeyChange) | 搜索框下拉菜单改变事件 | EventEmitter\ | |
(searchValueChange) | 搜索框输入值改变世界 | EventEmitter\ | |
(languageChange) | 下方默认配置中\点击change事件 | EventEmitter\中文:'zh'英文:'en' | 默认为language传入值 |
(themeChange) | 下方默认配置中<主题>换肤change事件 | EventEmitter\白色版:'light'黑色版:'black' | 默认为theme传入值 |
(logout) | 下方默认配置中<退出>点击事件 | EventEmitter\ | |
(searchApi) | 统一搜索事件 | EventEmitter | |
listOfData | 表格数据 | [] | [] |
total | 后端分页数据总条数 | Number | 0 |
- |