vue 公共组件封装(slot 插槽使用)

使用场景:

    

 

 

公共组件：

<template>
  <div class="title-box">
    <div class="title">
      <span>{{title}}</span>
      <slot name="right"></slot>
    </div>
    <span class="square"></span>
  </div>
</template>
<style>
</style>
<script>
export default {
  name: 'cardTitle',
  props: {
    title: {
      default: '',
    },
  },
  data() {
    return {}
  },
}
</script>
<style scoped lang="scss">
@import '@/styles/colorVariables.scss';
.title-box {
  position: relative;
  height: 0.5rem;
  line-height: 0.5rem;
  border-bottom: 1px solid $white_6;
  .title {
    font-size: 0.16rem;
    display: flex;
    justify-content: space-between;
  }
  .square {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 4px;
    background: $white;
  }
  .legend {
    ul li {
      font-size: 0.12rem;
      color: $white_5;
      i {
        float: left;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: $yellow1;
        margin: calc((0.5rem - 8px) / 2) 10px 0 0;
      }
    }
  }
}
</style>

 

 场景1使用：

<cardTitle title="机电设备统计"></cardTitle>

 

 

 

 场景2使用：

<cardTitle title="机电设备统计">
          <div slot="right" class="legend">
            <ul>
              <li>
                <i></i>
                建筑总用电（kWh)
              </li>
            </ul>
          </div>
</cardTitle>