DolphinHybrid
点我扫二维码，查看demo

# NavBar 导航栏

# 介绍

导航栏提供方便快捷的方式返回上一页，以及导航到其他页面。

# 引入

通过以下方式来按需注册组件。

import Vue from 'vue';
import { NavBar } from '@dolphin-iot/ui'

Vue.use(NavBar);
1
2
3
4

# 代码演示

# 基础用法

设置 title 属性，可以显示导航栏显示的标题 。

<template>
    <mx-nav-bar title="标题" @left-click="onLeftClick" @right-click="onRightClick" />
</template>
<script>
export default {
    methods:{
        onLeftClick(e){
            alert('left clicked')
        },
        onRightClick(e){
            alert('right clicked')
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 超级导航栏

设置 title 属性，通过数组的形式传递参数，可以实现导航栏显示多个标题 。

<template>
    <mx-nav-bar @change="getTabValue" :title="title" @left-click="onLeftClick" @right-click="onRightClick"/>
</template>
<script>
export default {
    data() {
        return{
            title: ['设备', '推荐']
        }
    },
    methods:{
        onLeftClick(e){
            alert('left clicked')
        },
        onRightClick(e){
            alert('right clicked')
        },
        getTabValue(val){
            alert(val)
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 显示右侧文本

通过设置 right-text 属性可以显示右侧文本, 通过设置 more 为 false 可以不显示右侧图标。

<template>
    <mx-nav-bar title="标题" right-text="选择" :more="false" @left-click="onLeftClick" @right-click="onRightClick" />
</template>
<script>
export default {
    methods:{
        onLeftClick(e){
            alert('left clicked')
        },
        onRightClick(e){
            alert('right clicked')
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 副标题

通过设置 subtitle 属性可以显示副标题。

<template>
    <mx-nav-bar title="家电安装" subtitle="2台设备" right-text="选择" :more="false" @left-click="onLeftClick" @right-click="onRightClick" />
</template>
<script>
export default {
    methods:{
        onLeftClick(e){
            alert('left clicked')
        },
        onRightClick(e){
            alert('right clicked')
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 自定义右侧内容

通过设置 right 插槽，可以自定义右侧内容。

<template>
    <mx-nav-bar title="标题" @left-click="onLeftClick" @right-click="onRightClick" >
        <mx-icon slot="right" name="star" size="20" />
    </mx-nav-bar>
</template>
<script>
export default {
    methods:{
        onLeftClick(e){
            alert('left clicked')
        },
        onRightClick(e){
            alert('right clicked')
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Api

# Props

参数 说明 类型 默认值 是否必须
background 背景颜色 string - -
title 标题 string - 是
title-color 标题颜色 string array - -
subtitle 副标题 string - -
subtitle-color 副标题颜色 string - -
icon-color 图表颜色 string - -
left-text 左侧文本 string - -
left-arrow 是否显示左侧箭头图标 boolean true -
right-text 右侧文本 string - -
more 是否显示右侧 more 图标 boolean true -
fixed 是否固定在顶部 boolean false -
z-index 导航栏 z-index number 1030 -
border 是否显示底部边框 boolean false -
safe-area-inset-top 是否开启顶部安全区 boolean false -

# Events

事件名称 说明 回调参数
left-click 左侧部分点击时触发 e: Event
right-click 右侧部分点击时触发 e: Event
change 当且仅当title通过数组形式传参的时生效 index

# Slots

名称 说明
title 自定义标题
subtitle 自定义副标题
left 自定义左侧区域内容
right 自定义右侧区域内容
更新时间: 12/14/2021, 9:38:18 AM

← TabBar 标签栏 →