kz-header

筷子共用头部组件

USEAGE

<template>
  <div id="app">
    <kz-header :nav="header.nav" :profile="header.profile" :lang="header.lang"></kz-header>
  </div>
</template>
 
<script>
// 引入kz-header组件
import 'kz-header/dist/index.css'
import kzHeader from 'kz-header'
// 或
// import { kzHeader } from 'kz-header'
 
export default {
  name: 'app',
  data () {
    return {
      // 头部组件配置
      header: {
        // 导航
        nav: [],
        // 用户信息
        profile: {},
        // 语言配置，可以不设置
        lang: {
          list: [{
            value: 'zh',
            title: '中文'
          }, {
            value: 'en',
            title: 'English'
          }, {
            value: 'tw',
            title: '台灣'
          }],
          selected: '中文'
        }
      }
    }
  },
  components: {
    // 注册组件
    KzHeader
  },
  // 组件创建去初始化头部
  created () {
    // 异步获取数据
    const fetch = async () => {
      // 获取导航接口
      let nav = await this.$http.get('/static/mock/nav.json').then(res => res.body)
      // 获取用户信息接口
      let user = await this.$http.get('/static/mock/user.json').then(res => res.body)
      // -- 更新数据
      this.header.nav = nav
      this.header.profile = user
    }
    fetch()
  }
}
</script>
 

Build Setup

# install dependencies
npm install
 
# serve with hot reload at localhost:8080
npm run dev
 
# build for production with minification
npm run build

For detailed explanation on how things work, checkout the guide and docs for vue-loader.