one-vue3

如何使用

在项目中的main.ts中:

import { createApp } from 'vue';
import App from './App.vue';
import FtlOne from '@ftlab/one-vue3';
import '@ftlab/one-vue3/dist/style.css';
import '@ftlab/one-vue3/assets/fontAwesome/css/font-awesome.css';

const app=createApp(App);
app.use(FtlOne); // 注册全局组件

侧边栏主题色配置

在项目中新建一个scss文件，填写如下内容，在全局中引入

@forward 'node_modules/@ftlab/one-vue3/assets/css/index.scss' with (
  $color: #fff, /* 侧边栏菜单字体颜色 */
  $--color-header: #2e45ad, /* 侧边栏菜单交互背景色 */
  $--color-text: #0026d5, /* 侧边栏二级子菜单选中字体颜色 */
  $bg: #00265d, /* 侧边栏菜单背景色 */
  $content-bg: #94a5c1 /* 侧边栏菜单二级子菜单背景色 */
);

提供的全局组件

FtlNavbar

顶部导航栏

| 属性 | 说明 | 类型 | 默认值 | |:----------------:|:---------:|:--------:|:----------------------------:| | sidebar | 是否可以收起侧边栏 | boolean | true | | isShowBreadcrumb | 是否展示面包屑 | boolean | true | | isShowScreenfull | 是否可以全屏展示 | boolean | true | | langCodeList | 语言下拉框选项 | string[] | 'en', 'cn', 'fr', 'es', 'or' | | logOutText | 退出按钮文本 | string? | 退出 |

FtlSidebar

侧边栏

| 属性 | 说明 | 类型 | 默认值 | |:----------------:|:-------:|:-----------------:|:----:| | collapse | 是否展开侧边栏 | boolean | true | | sideBarParams | 侧边栏配置 | SidebarParamsType | {} |

FtlEntry

下拉框(提供项目间跳转的能力)

| 属性 | 说明 | 类型 | 默认值 | |:-------------:|:------:|:------:|:---------:| | witdh | 下拉框宽度 | number | 240 | | authBaseUrl | 权限请求地址 | string | gateway地址 |