Navbar 导航栏

效果

使用方法

<template>
    <div style="background:#f6f6f6">
      <lc-title title="导航栏"></lc-title>
      <category title="默认用法"></category>
      <lc-navbar @on-click-back="back" @on-click-title="title" :leftShow="false" :rightShow="false" @on-click-more="more"></lc-navbar>
      <category title="增加左侧按钮"></category>
      <lc-navbar @on-click-back="back" @on-click-title="title" @on-click-more="more" title="NavBar100">
        <a slot="left" @click="close">关闭</a>
      </lc-navbar>
      <category title="增加右侧按钮"></category>
      <lc-navbar @on-click-back="back" @on-click-title="title" @on-click-more="more" title="NavBar2">
        <a slot="right" @click="edit">编辑</a>
      </lc-navbar>
      <category title="更改左侧图标"></category>
      <lc-navbar @on-click-back="back" @on-click-title="title" @on-click-more="more" title="NavBar3">
        <a slot="back-icon">返回</a>
      </lc-navbar>
      <category title="更改右侧图标"></category>
      <lc-navbar @on-click-back="back" @on-click-title="title" @on-click-more="more" title="NavBar4">
        <a slot="more-icon">更多</a>
      </lc-navbar>
      <category title="更改样式"></category>
      <lc-navbar @on-click-back="back" @on-click-title="title" @on-click-more="more" title="NavBar5" style="background-color:#000; color: #fff; height:60px; line-height: 60px;"></lc-navbar>
    </div>
</template>

<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
  components: { LcTitle, Category },
  data() {
    return {};
  },
  methods: {
      back(){
        alert('header头部， 点击返回')
      },
      title(){
        alert('header头部， 点击title')
      },
      more(){
        alert('header头部， 点击更多')
      },
      close(){
        alert('header头部， 点击关闭')
      },
      edit(){
        alert('header头部， 点击编辑')
      }
  }
};
</script>

可配置参数

字段	说明	类型	默认值
leftShow	是否显示左侧按钮	Boolean	true
title	中间显示文字内容	String	NavBar
rightShow	是否显示右侧按钮	Boolean	true

事件回调

@on-click-back="back" 
@on-click-title="title" 
@on-click-more="more"