v-header
移动端 Vue.js header 组件
Demo
Install
# install dependencies
npm i v-header -s
yarn add v-header
Usage
// 全局安装
import Vue from 'vue'
import Header from 'v-header'
Vue.use(Header) // 全局安装 默认组件名称 v-header
// 局部安装
import { Header } from 'v-header'
export default {
name: 'App',
components: {
[Header.name]: Header // 局部安装 推荐使用该形式 使用组件默认名称
}
}
<!-- app.vue -->
<template>
<div id="app">
<v-header title="这是标题"></v-header> <!-- 将组件放在顶部 -->
<someThingYourComponents/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
tips
- 组件未实现fixed 功能需要你自行实现
- 组件左侧slot在back=true时 显示后退icon 并且附带路由功能(在你安装vue-router的前提下)
实现思路
- 使用flex布局 将组件置于顶部 其余部分flex: 1
- 使用fixed布局 覆盖组件css
props
name |
desc |
type |
default |
required |
title |
组件标题(可用slot自定义) |
String |
'' |
false |
back |
点击left是否使用默认操作 |
Boolean |
true |
false |
slot
name |
desc |
info |
default |
title插槽 |
不传递会使用组件 title |
left |
left插槽 |
当back(props)为true时默认显示后退icon |
right |
right插槽 |
null |
Event
name |
desc |
param |
click-left |
点击left触发(仅在back为false时触发) |
null |
click-right |
点击right触发 |
null |
click-title |
点击right触发 |
null |
TODO
Github