@fesjs/traction-widget

Appearance

Return to top
On this page

BHorizontalLayout

用于提供通用型水平布局

组件注册

js
import { BHorizontalLayout } from '@fesjs/traction-widget';
app.use(BHorizontalLayout);

代码演示

基础用法

传入菜单列表数据，自动生成左侧为菜单栏的水平布局

Play
<template>
    <div style="height: 500px">
        <BHorizontalLayout v-model:curPath="currentPath" :menus="menus" @menuChange="onMenuClick" @sideBarCollapse="onSideBarCollapse" footText="自定义注脚">
            <template v-slot:top>
                    顶部内容
            </template>
            <template v-slot:container>
                <div>
                    右侧容器内容使用slot插槽,
                    当前选择菜单路径：{{currentPath}}
                </div>
            </template>
        </BHorizontalLayout>
    </div>
</template>
<script setup lang="ts">
import { ref, h} from 'vue';
import { BHorizontalLayout } from '@fesjs/traction-widget';
import { AppstoreOutlined, DateOutlined,ClusterOutlined, SettingOutlined } from '@fesjs/fes-design/icon';

const currentPath = ref<string>('/tasks');
const menus = ref([{
    label: '任务查询',
    value: '/tasks',
    icon: () => h(AppstoreOutlined),
}, {
    label: '我的项目',
    value: '/rules',
    icon: () => h(SettingOutlined),
    children: [{
        label: '规则查询一个很长想看下省略效果的标题',
        value: '/rules/query1',
        icon: () => h(DateOutlined),
        children: [{
            label: '规则查询一个很长想看下省略效果的标题',
            value: '/rules/query2',
            icon: () => h(DateOutlined),
        }, {
            label: '规则模板',
            value: '/rules/template3',
            icon: () => h(ClusterOutlined),
            children: [{
                label: '规则查询一个很长想看下省略效果的标题',
                value: '/rules/query4',
                icon: () => h(DateOutlined),
                children: [{
                    label: '规则查询一个很长想看下省略效果的标题',
                    value: '/rules/query5',
                    icon: () => h(DateOutlined),
                }, {
                    label: '规则模板',
                    value: '/rules/template6',
                    icon: () => h(ClusterOutlined),
                }]
            }, {
                label: '规则模板',
                value: '/rules/template7',
                icon: () => h(ClusterOutlined),
            }]
        }]
    }, {
        label: '规则模板',
        value: '/rules/template8',
        icon: () => h(ClusterOutlined),
    }]
},{
    label: '我的项目2',
    value: '/rules2',
    icon: () => h(SettingOutlined),
    children: [{
        label: '规则查询一个很长想看下省略效果的标题2',
        value: '/rules2/query',
        icon: () => h(DateOutlined),
    }, {
        label: '规则模板2',
        value: '/rules2/template',
        icon: () => h(ClusterOutlined),
    }]
},
{
    label: '任务查询1',
    value: '/tasks1',
    icon: () => h(AppstoreOutlined),
},{
    label: '任务查询2',
    value: '/tasks2',
    icon: () => h(AppstoreOutlined),
},{
    label: '任务查询3',
    value: '/tasks3',
    icon: () => h(AppstoreOutlined),
},{
    label: '任务查询4',
    value: '/tasks4',
    icon: () => h(AppstoreOutlined),
},{
    label: '任务查询5',
    value: '/tasks5',
    icon: () => h(AppstoreOutlined),
},{
    label: '任务查询6',
    value: '/tasks6',
    icon: () => h(AppstoreOutlined),
},{    label: '任务查询7',
    value: '/tasks7',
    icon: () => h(AppstoreOutlined),
},{    label: '任务查询8',
    value: '/tasks8',
    icon: () => h(AppstoreOutlined),
},{    label: '任务查询9',
    value: '/tasks9',
    icon: () => h(AppstoreOutlined),
},{
    label: '任务查询10',
    value: '/tasks10',
    icon: () => h(AppstoreOutlined),
}]);

const onMenuClick = (v: any) => {
    currentPath.value = v.value;
    console.log('onMenuClick-菜单跳转', currentPath.value);
};

const onSideBarCollapse = (v:Boolean) => {
    if (v) {
        console.log('侧边栏折叠')
    } else {
        console.log('侧边栏展开')
    }
}
</script>
查看代码

设置默认菜单项全部展开

Play
<template>
    <div style="height: 500px">
        <BHorizontalLayout v-model:curPath="currentPath" :menus="menus" @menuChange="onMenuClick" @sideBarCollapse="onSideBarCollapse" footText="自定义注脚" :defaultExpandAll="true">
            <template v-slot:top>
                    顶部内容
            </template>
            <template v-slot:container>
                <div>
                    右侧容器内容使用slot插槽,
                    当前选择菜单路径：{{currentPath}}
                </div>
            </template>
        </BHorizontalLayout>
    </div>
</template>
<script setup lang="ts">
import { ref, h} from 'vue';
import { BHorizontalLayout } from '@fesjs/traction-widget';
import { AppstoreOutlined, DateOutlined,ClusterOutlined, SettingOutlined } from '@fesjs/fes-design/icon';

const currentPath = ref<string>('');
const menus = ref([{
    label: '任务查询',
    value: '/tasks',
    icon: () => h(AppstoreOutlined),
}, {
    label: '我的项目',
    value: '/rules',
    icon: () => h(SettingOutlined),
    children: [{
        label: '规则查询一个很长想看下省略效果的标题',
        value: '/rules/query1',
        icon: () => h(DateOutlined),
        children: [{
            label: '规则查询一个很长想看下省略效果的标题',
            value: '/rules/query2',
            icon: () => h(DateOutlined),
        }, {
            label: '规则模板',
            value: '/rules/template3',
            icon: () => h(ClusterOutlined),
            children: [{
                label: '规则查询一个很长想看下省略效果的标题',
                value: '/rules/query4',
                icon: () => h(DateOutlined),
                children: [{
                    label: '规则查询一个很长想看下省略效果的标题',
                    value: '/rules/query5',
                    icon: () => h(DateOutlined),
                }, {
                    label: '规则模板',
                    value: '/rules/template6',
                    icon: () => h(ClusterOutlined),
                }]
            }, {
                label: '规则模板',
                value: '/rules/template7',
                icon: () => h(ClusterOutlined),
            }]
        }]
    }, {
        label: '规则模板',
        value: '/rules/template8',
        icon: () => h(ClusterOutlined),
    }]
},{
    label: '我的项目2',
    value: '/rules2',
    icon: () => h(SettingOutlined),
    children: [{
        label: '规则查询一个很长想看下省略效果的标题2',
        value: '/rules2/query',
        icon: () => h(DateOutlined),
    }, {
        label: '规则模板2',
        value: '/rules2/template',
        icon: () => h(ClusterOutlined),
    }]
},
{
    label: '任务查询1',
    value: '/tasks1',
    icon: () => h(AppstoreOutlined),
},{
    label: '任务查询2',
    value: '/tasks2',
    icon: () => h(AppstoreOutlined),
},{
    label: '任务查询3',
    value: '/tasks3',
    icon: () => h(AppstoreOutlined),
},{
    label: '任务查询4',
    value: '/tasks4',
    icon: () => h(AppstoreOutlined),
},{
    label: '任务查询5',
    value: '/tasks5',
    icon: () => h(AppstoreOutlined),
},{
    label: '任务查询6',
    value: '/tasks6',
    icon: () => h(AppstoreOutlined),
},{    label: '任务查询7',
    value: '/tasks7',
    icon: () => h(AppstoreOutlined),
},{    label: '任务查询8',
    value: '/tasks8',
    icon: () => h(AppstoreOutlined),
},{    label: '任务查询9',
    value: '/tasks9',
    icon: () => h(AppstoreOutlined),
},{
    label: '任务查询10',
    value: '/tasks10',
    icon: () => h(AppstoreOutlined),
}]);

const onMenuClick = (v: any) => {
    currentPath.value = v.value;
    console.log('onMenuClick-菜单跳转', currentPath.value);
};

const onSideBarCollapse = (v:Boolean) => {
    if (v) {
        console.log('侧边栏折叠')
    } else {
        console.log('侧边栏展开')
    }
}
</script>
查看代码

参数说明

BHorizontalLayout Props

属性说明类型默认值是否必须
curPath当前路径String''是
menus菜单列表Array(object)[]是
defaultExpandAll是否默认展开全部菜单，当curPath有值时，defaultExpandAll将失效booleanfalse否
isFoot是否展示页脚Booleantrue否
footText页脚内容StringWeDataSphere版权所有否

BHorizontalLayout Events

事件名称说明回调参数
menuChange菜单切换时触发的回调函数当前菜单路径值
sideBarCollapse侧边栏折叠展开时触发的回调函数当前是否展开菜单，true-折叠，false-展开

BHorizontalLayout Slots

名称说明参数
top菜单头部内容-
container布局右侧主要内容-

注意事项

  1. BHorizontalLayout为根元素，组件会占满屏幕高度。
  2. 布局组件，html的height为100%。
  3. 菜单支持根据路径匹配到根菜单进行展开，根菜单需配置路径value

Released under the MIT License.

Copyright © webank