header-nav-bar
v1.0.2
Published
A Vue.js project
Downloads
3
Readme
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.