mp-head-common
# **头部（全局通用）**
包含全局菜单（mp-nav）和全局个人中心导航（mp-user-center），及对应入口
包含头部搜索功能
头部高度、背景色、logo、图标颜色自定义
## 依赖
Jquery 1 | 2
Vue 2.6以上
## 参数
#### :logoUrl
> 值：[String]
描述：左上角logo图标；
```language
<mp-head-common :logo-url="'/static/img/show/index/index/logo.png'"></mp-head-common>
```
#### :logoLink
> 值：[String]
描述：左上角logo图标点击跳转地址（logoUrl为空时该值无意义）；
```language
<mp-head-common :logo-link="'/show/index/index'"></mp-head-common>
```
#### :iconColor
> 值：[String] white | black
默认：white
描述：分别对应黑白两种图标
```language
<mp-head-common :icon-color="white"></mp-head-common>
```
#### :backgroundColor
> 值：[String]
默认：#00000000
描述：导航背景色,支持rgb、rgba、hex三种格式
```language
<mp-head-common :background-color="#000000"></mp-head-common>
```
#### :height
> 值：[Number]
单位：px
默认：[MP_HEAD_COMMON_HEIGHT](doc:clt2fzSc)
描述：导航高度。内部按钮自动垂直居中（插槽元素除外）；个人中心导航的top值与之相等
```language
<mp-head-common :height="50"></mp-head-common>
```
#### :search
> 值：[Boolean] true | false
默认：true
描述：是否开启搜索功能
```language
<mp-head-common :search="false"></mp-head-common>
```
#### @search
> 描述：输入框enter事件、搜索按钮点击事件回调
参数：searchName 搜索文本内容
```language
<mp-head-common @search="toSearch"></mp-head-common>
...
toSearch(searchName){
console.log(searchName)
}
...
```
## 内置方法
##### changeHeadSearch
> 类型：`Function`
描述：唤起或关闭搜索 `:search`为false时也可以正常唤起搜索和触发`@search`方法
```language
html
<mp-head-common ref="mpHeadCommon" @search="doSearch"></mp-head-common>
js
...
doSearch(searchName){
//手动关闭搜索组件
this.$refs.mpHeadCommon.changeHeadSearch()
...
}
...
```
## $const
#### [MP_HEAD_COMMON_HEIGHT](doc:clt2fzSc)
> 值：100
单位：px
类型：Number
描述：组件默认高度
```language
mounted(){
console.log(this.$const.MP_HEAD_COMMON_HEIGHT)
},
```
## 插槽
> 插槽名：left | center | right 及默认
描述：left | center | right分别对应插槽插入搜索按钮和个人中心按钮的位置。
```language
<mp-head-common>
/*这里是渲染后全局菜单导航位置*/
<template>/*这里是渲染后默认插槽位置*/</template>
<template v-slot:left></template>
/*这里是渲染后搜索按钮*/
<template v-slot:center></template>
/*这里是渲染后个人中心按钮*/
<template v-slot:right></template>
</mp-head-common>
```