t-navbar
Navbar 导航栏
组件介绍
导航栏组件，自定义导航栏，支持透明背景、渐变背景，提供完整的导航功能。
平台兼容
| Harmony | H5 | Android | iOS | 小程序 | UTS |
|---|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
基础用法
vue
<template>
<t-navbar title="页面标题"></t-navbar>
<t-navbar title="自定义导航" :showBack="true" backText="返回"></t-navbar>
<t-navbar title="右侧按钮" rightIcon="setting" @iconSelect="handleRightClick"></t-navbar>
</template>
<script setup>
function handleRightClick() {
console.log('点击右侧按钮');
}
</script>Props
| 属性名 | 类型 | 默认值 | 说明 | 可选值 |
|---|---|---|---|---|
| size | String | "medium" | 组件尺寸 | large, medium, small, mini |
| type | String | "" | 组件类型 | info, primary, error, warning, success |
| disabled | Boolean | false | 组件是否禁用 | true, false |
| hover | Boolean | false | 是否有点击效果 | true, false |
| path | String | "" | 点击组件后跳转的页面路径 | - |
| effect | String | "normal" | 组件显示主题 | normal, dark, light, plain |
| title | String | "" | 导航中间标题文本 | - |
| titleViewClass | String | "" | 标题文本盒子的样式 | - |
| titleClass | String | "" | 标题文本的样式 | - |
| showBack | Boolean | true | 是否显示返回按钮 | true, false |
| backViewClass | String | "" | 返回按钮盒子的样式 | - |
| backIconClass | String | "" | 返回按钮图标的样式 | - |
| backTextClass | String | "" | 返回按钮文本的样式 | - |
| rightViewClass | String | "" | 右侧容器盒子的样式 | - |
| rightIconClass | String | "" | 右侧图标的样式 | - |
| rightTextClass | String | "" | 右侧文字的样式 | - |
| safeAreaInsetTop | Boolean | true | 是否在顶部使用安全区域嵌入 | true, false |
| placeholder | Boolean | true | 是否占位防止塌陷 | true, false |
| fixed | Boolean | true | 是否固定定位 | true, false |
| border | Boolean | false | 是否显示边框 | true, false |
| backIcon | String | "arrow-left" | 返回按钮的图标 | - |
| backText | String | "" | 返回按钮的文本 | - |
| rightIcon | String | "" | 右侧图标 | - |
| rightText | String | "" | 右侧文本 | - |
| autoBack | Boolean | true | 是否自动处理返回动作 | true, false |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击时触发 | - |
| transitionend | 动画结束时触发 | - |
| initFinished | 组件初始化完成触发 | 组件的节点信息 |
| touchstart | 触摸开始时触发 | 触摸事件对象 |
| touchend | 触摸结束时触发 | 触摸事件对象 |
| touchmove | 触摸移动时触发 | 触摸事件对象 |
| touchcancel | 触摸取消时触发 | 触摸事件对象 |
Slots
| 插槽名 | 说明 |
|---|---|
| left | 左侧插槽，用于自定义返回按钮区域 |
| center | 中间插槽，用于自定义标题区域 |
| right | 右侧插槽，用于自定义右侧按钮区域 |