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 | 自定义右边按钮内容