NavBar 头部导航

基本用法

  1. <nut-navbar
  2. @on-click-back="back"
  3. @on-click-title="title"
  4. @on-click-more="more"
  5. :leftShow="false"
  6. :rightShow="false"
  7. >title</nut-navbar>
  1. export default {
  2. methods: {
  3. back(){
  4. alert('header头部, 点击返回')
  5. },
  6. title(){
  7. alert('header头部, 点击title')
  8. },
  9. more(){
  10. alert('header头部, 点击更多')
  11. }
  12. }
  13. };

两侧按钮不显示状态下,on-click-back,on-click-more事件不触发

自定义样式

内置默认为白色,所有样式可自定义

  1. <nut-navbar
  2. style="background-color:#000; color: #fff; height:60px; line-height: 60px;"
  3. >
  4. NavBar5
  5. </nut-navbar>

事件

内置 on-click-backon-click-titleon-click-more 三种监听事件。

  1. <nut-navbar
  2. @on-click-back="back"
  3. @on-click-title="title"
  4. @on-click-more="more"
  5. >
  6. </nut-navbar>
  1. export default {
  2. methods: {
  3. back(){
  4. alert('header头部, 点击返回')
  5. },
  6. title(){
  7. alert('header头部, 点击title')
  8. },
  9. more(){
  10. alert('header头部, 点击更多')
  11. }
  12. }
  13. };

新增图标

通过slot leftright 增加左右两侧图标

  1. <nut-navbar>NavBar1
  2. <a slot="left" @click="close">关闭</a>
  3. <a slot="right" @click="edit">编辑</a>
  4. </nut-navbar>
  1. export default {
  2. methods: {
  3. close(){
  4. alert('header头部, 点击关闭')
  5. },
  6. edit(){
  7. alert('header头部, 点击编辑')
  8. }
  9. }
  10. };

修改默认图标

通过slot back-iconmore-icon 来修改组件两侧默认图标

  1. <nut-navbar>NavBar1
  2. <a slot="back-icon">返回</a>
  3. <a slot="more-icon">更多</a>
  4. </nut-navbar>

自定义Class

  1. <nut-navbar
  2. class="my-nav"
  3. >title</nut-navbar>

Prop

字段说明类型默认值
leftShow是否显示左侧按钮Booleantrue
title中间显示文字内容StringNavBar
rightShow是否显示右侧按钮Booleantrue

NavBar 导航栏 - 图1