18.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: {
    }
}
</script>

Attributes:data

Prop	Type	Required	Default	Description
central	Object	N	{}	注1
backgroundColor	string	N	-	头部包括状态栏的背景色
trailing	Object	N	{}	注2

• 注 1 data.list

Prop	Type	Required	Default	Description
style	string	Y	iconText/Texticon	最右边图标和文字的顺序Texticon则文字在左，图标在右
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	点击图标和文字的回调事件	-