# 9.26 APP 原生头部导航栏（Midea Minibar）
APP 内置组件，可直接在 template 中使用，不需要 import 导入和注册;国际美居3.14，国际东芝2.11；开始支持
# 基础用法
<template>
<midea-minibar
:data="{
central: {
style: 'text',
titleName: 'title',
},
backgroundColor: '#f2f2f2',
trailing: {
style: 'iconText',
titleName: 'end',
icon: '',
titleFontSize: '16',
titleColor: '#000000',
iconWidth: '25',
iconHeight: '25',
trailing: '16',
margin: '4',
opacity: '0.3',
maxWidth: '300',
},
}"
@mideaMiniBarItemClick="goEnd"
></midea-minibar>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
goEnd(event) {
console.log(event)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
# Attributes:data
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| central | Object | N | {} | 注1 |
| backgroundColor | string | N | - | 头部包括状态栏的背景色 |
| trailing | Object | N | {} | 注2 |
- 注 1、注 2 data.central 与 data.trailing
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| style | string | Y | iconText/Texticon | 图标与文字的显示顺序：Texticon 为文字在左、图标在右；纯文字示例使用 text |
| titleName | string | Y | - | 中间标题内容 |
| icon | string | Y | - | 中间的icon地址 需要转换成base64格式 |
| titleFontSize | string | Y | - | 标题文字大小 |
| titleColor | string | Y | - | 标题颜色 |
| iconWidth | string | Y | - | 中间的icon宽度 |
| iconHeight | string | Y | - | 中间的icon高度 |
| trailing | string | Y | - | 图标文字距离最右边的距离 |
| margin | string | Y | - | 图标和文字的间距 |
| opacity | string | Y | - | 图标文字透明度 |
| maxWidth | string | Y | - | 图标文字的最大宽度 |
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| mideaMiniBarItemClick | 点击图标和文字的回调事件 | - |