Appearance
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 | 是否显示返回箭头 | Boolean | true | 否 |
BNavHeader Events #
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| back | 点击返回箭头时触发的回调函数 | - |
BNavHeader Slots #
| 名称 | 说明 | 参数 |
|---|---|---|
| suffix | 后缀内容 | - |