segi-mext-header
移动端头部导航组件
引用插件方法与普通第三方库的方法一致
import SgMextHeader from 'segi-mext-header'
Vue.use(SgMextHeader)
使用
<SG-Mext-Header
:show="true"
type="oneLine"
bgColor="#fff"
title="导航标题"
iconColor="black"
:isFixed="true"
:preventGoBack="true"
@on-click-back="backToBasic()" >
<a slot="right">导航右边插槽</a>
</SG-Mext-Header>
API
Props
参数 | 说明 | 类型 | 取值 | 默认值 |
---|---|---|---|---|
show | 组件显示 | boolean | - | true |
type | 展示样式 | string | oneLine、twoLine | oneLine |
title | 导航标题 | string | - | 标题 |
bgColor | 背景颜色 | string | - | #fff |
iconColor | 左边返回按钮、右边更多按钮颜色 | string | white、black | white |
preventGoBack | 阻止默认返回 | boolean | - | false |
isShowMore | 右边按钮是否展示 | boolean | - | false |
isFixed | 是否固定定位 | boolean | - | true |
Events
| 事件名 | 说明 | | on-click-back | 当preventGoBack为true时生效,点击左边返回触发
Slots
| 名称 | 说明 | | right | 自定义右边按钮内容