【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'exportdefault{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 00 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.vuemethods:{handleSetLineChartData(type){this.$emit('handleSetLineChartData', type)}}

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

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

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

//admin文件夹下的index.vueconst 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