【vue-element-admin】github高质量vue项目解读，小白都能看懂（第三篇）

panel-group

日月几何，天地玄黄，今日奇观，书接上一回。

这次我们来讲<panel-group />组件
因为本文是跟着项目来的，所以不从第一篇看起的小伙伴云里雾里，所以针对以上情况，我决定对于vue-element-admin项目出现的大部分技术栈以及知识点（比如：element-ui，echarts，vuex等等）进行讲解与实操。跟着项目学习是非常有效率的，但把项目中学到的知识点，自己再对着官网的API进行扩展更能加强和巩固。当然，是在另一个专栏中

el-row与el-col

代码有点多。

<template>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            New Visits
          </div>
          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('messages')">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="message" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            Messages
          </div>
          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('purchases')">
        <div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="money" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            Purchases
          </div>
          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        <div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            Shoppings
          </div>
          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import CountTo from 'vue-count-to'

export default {
  components: {
    CountTo
  },
  methods: {
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>

这里首先就用到了element-ui的layout布局，使用el-row和el-col并通过它们的属性来实现组件的布局。element-ui将整个页面栅格化，而el-row表示一行，el-col表示列，element-ui一共有24个列
el-row的:gutter属性设置了行内各列之间的间隔，默认为0，这个属性会在子元素el-col的左右两边以padding的形式添加，比如上述的:gutter值为40，那么，每个el-col两边都会出现20px的padding。
el-col中的:xs :sm :lg等属性指定了当页面宽度改变时，el-col占多少栅格，因为即使页面宽度变小，其依旧可以分为24格。

vue-count-to

这是一个Vue.js组件，用于实现数字的动态增加或减少的效果。你可以通过设置startVal（开始值）和endVal（结束值）来控制数字的起始和结束值。此外，你还可以设置duration（持续时间）来控制动画的持续时间。

$emit()的妙用

可以看到methods里有一个点击事件

//admin文件夹下components下的panel-group.vue
methods: {
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    }
  }

this.$emit(‘event’, params)是一种常见的模式，用于子组件向父组件发送事件。这里的this.$emit是一个方法，它可以触发一个自定义事件，并将这个事件发送到父组件。其接收两个参数

1. 'event’是你想要触发的事件的名称。
2. 'params’是你想要传递给事件处理器的参数。

//admin文件夹下的index.vue
data() {
    return {
      lineChartData: lineChartData.newVisitis
    }
  },
  methods: {
    // 这个type可以是newVisitis或messages或purchases或Sshoppings
    // 由子组件PanelGroup使用$emit()方法向父组件发送事件
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  }

//admin文件夹下的index.vue
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

在子组件中触发不同的点击事件，通过this.$emit()将点击事件和参数提供给父组件，父组件获得后，根据参数的不同渲染lineChartData中的数据。

style元素杂谈

1. lang=“scss”：SCSS是CSS预处理器SASS的一种语法，它允许你使用变量、嵌套规则、混合、函数等高级功能来编写更加清晰、易于维护的CSS。
2. scoped：scoped属性指定了样式表的作用范围。当一个style标签有scoped属性时，它的CSS只会应用到当前组件的元素。这可以防止样式冲突，使得每个组件的样式都是独立的
3. &：其代表父选择器的引用。在SCSS中，它通常用于嵌套规则
4. @media (max-width:550px)：{}是CSS中的一个媒体查询。这个查询会应用在屏幕宽度小于或等于550像素的设备上
5. float:none !important;：这个声明表示元素不进行浮动，并且这个声明的权重很高，会覆盖其他任何关于float的声明

本组件中还有svg-icon元素没有讲解到，大家可以去看看这个人的文章https://blog.csdn.net/qq_39246667/article/details/124347398