Skip to content
On this page

BNavHeader

提供页面顶部的标题返回栏

组件注册

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

代码演示

基础用法

传入导航栏数据,生成导航。

Play
<template>
    <div>
        <BNavHeader title="顶部栏标题" @back="handleBack">
            <template v-slot:suffix>
                <div>后缀内容</div>
            </template>
        </BNavHeader>
        <div class="eg-page">页面内容</div>
    </div>
</template>
<script setup lang="ts">
import { ref, watch, h } from 'vue';
import { BNavHeader } from '@fesjs/traction-widget';
import { FMessage } from '@fesjs/fes-design';
const handleBack = () => {
    FMessage.info('自定义返回逻辑');
};
</script>
<style scoped>
.eg-page {
    padding: 24px;
    background: #fff;
    border-radius: 4px;
}
</style>
查看代码

参数说明

BNavHeader Props

属性说明类型默认值是否必须
title顶部栏标题String-
isShowArrow是否显示返回箭头Booleantrue

BNavHeader Events

事件名称说明回调参数
back点击返回箭头时触发的回调函数-

BNavHeader Slots

名称说明参数
suffix后缀内容-

Released under the MIT License.