<template>
  <div class="headerTitle">
    <div>
      <div class="title">
        <span>{{title}}</span>  
        <slot name="titleSlot"> </slot>
      </div>
      <!--
        支持自定义传入title，使用方式参照下边代码
        <template v-slot:titleSlot>
            <i class="icon icon-edit"></i>
        </template> 
      -->
    </div>
    <div>
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'headerTitle',
  props:{
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    }
  },
  mounted() {
  },
  methods: {

  }
}
</script>

<style scoped>
.headerTitle {
  width: 100%;
  height: 58px;
  line-height: 58px;
  border-bottom: 1px solid #F5F5F5;
  display: flex;
  justify-content:space-between;
  align-items: center;
}
.title {
  font-size: 16px;
  font-weight: 500;
  color: #2C2B31;
  margin-left: 21px;
  display: flex;
  justify-content:space-between;
  align-items: center;
}
.title:before {
   content:"";
   display: inline-block;
   width: 3px;
   height: 14px;
   background: #5075FC;
   margin-right: 8px;
 }



















</style>
