vue 编辑header组件

<template>
  <div>
    <my-header custom-title="通讯录" custom-fixed >
      <button @touchstart="backBtn" slot="left">首页</button>
      <button @touchstart="homeBtn" slot="right">+</button>
    </my-header>
  </div>
</template>

<script>

import Vue from 'vue';  
import Vuex from 'vuex';  

Vue.component('my-header',{
  template:`<div id="header" :style="{'position':customFixed ? 'fixed':'static'}">
      <slot name="left"></slot>
      {{customTitle}}
      <slot name="right"></slot>
  </div>`,
  props:{
    'customTitle':{
      type:String,
      default:"标题"
    },
    'customFixed':{
      type:Boolean,
      default:false
    }
  }
})
export default {
  name: "HelloWorld",
  data() {
    return {
      }
    },
    methods:{
      backBtn:function(){
        alert("123")
      },
      homeBtn:function(){
        alert("123")
      },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.page-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
button{background: #f60; color: #fff;}
#header{width: 100%;height:50px; background: #666;color: #fff;text-align: center;line-height: 40px;font-size: 20px;}
#header button{height: 100%;padding: 0 5px}
#header button:nth-of-type(1){float: left}
#header button:nth-of-type(2){float: right}
</style>