v-header v1.0.0

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的前提下)

实现思路

0. 使用flex布局 将组件置于顶部 其余部分flex: 1
1. 使用fixed布局 覆盖组件css

props

slot

Event

TODO

Github