header-nav-bar v1.0.2

header-nav

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

参数配置

styles：传入一个字符串，修改导航的样式（width:100%;height:44px;font-size:16px;background:#000;color:#fff;line-height:44px;宽、高、字体大小、字体颜色、背景颜色、行间距离），必选 title：导航标题 leftImg：左边返回图标路径 ，默认空 rightImg：右边图标路径 ，默认空 isSearch：是否切换为搜索栏

实例

首先在项目的入口文件（main.js）中引入

import headerNav from 'header-nav'
Vue.use(headerNav) 

然后使用该组件

<headerNav :styles="styles" :msg="msg" />

msg: '要修改的标题',
styles:'width:100%;height:44px;font-size:16px;text-align:center;background:#000;color:#fff;line-height:44px;'
leftImg:'../src/assets/back.png',
rightImg:'../src/assets/clear-btn.png',
isSearch:true

methods中函数
@parentSearch="searchBtn" @parentBack="backBtn" @parentRight="rightBtn"

backBtn(e){
    console.log(e)
},
rightBtn(e){
    console.log(e)
},
searchBtn(e){
    console.log(e)
}

For detailed explanation on how things work, consult the docs for vue-loader.