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

天地玄黄，书接上一回。上次讲到了dashboard文件夹下index.vue。
在index.vue中导入了如下组件<adminDashboard />、<editorDashboard/>和辅助函数mapGetters
因上回讲过了mapGetters，mapGetters配合computed可以让我们在组件中用this.$xxx的形式访问store中getter的xxx值。所以在此不再叙述（我们马上会遇见更加详细的关于store文件夹的描述，等我以后的文章，未来可期🙂）。我们今天来谈谈这个<adminDashboard />组件吧！！

adminDashboard

打开admin和components

江湖规矩，先看admin下的index.vue，一行一行看起！！（虽然说是一行一行看，但是看代码时，还是自己觉得哪种方式好就用哪种）
这个div就是下图
代码第三行，这里有一个github-corner，这个东西就是上图右上角的github，我们看它的导入
找到这个文件夹打开，贴代码以下：

<template>
  <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
    <svg
      width="80"
      height="80"
      viewBox="0 0 250 250"
      style="fill:#40c9c6; color:#fff;"
      aria-hidden="true"
    >
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
      <path
        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
        fill="currentColor"
        style="transform-origin: 130px 106px;"
        class="octo-arm"
      />
      <path
        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
        fill="currentColor"
        class="octo-body"
      />
    </svg>
  </a>
</template>

<style scoped>
.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out
}

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0)
  }
  20%,
  60% {
    transform: rotate(-25deg)
  }
  40%,
  80% {
    transform: rotate(10deg)
  }
}

@media (max-width:500px) {
  .github-corner:hover .octo-arm {
    animation: none
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }
}
</style>

通常a标签不添加target属性时是在当前页面加载链接。当我们需要每次都在新页面加载链接时，则会在元素上添加target=“_blank” 关键字写法。aria-label属性而是为了增强网页在残障辅助阅读设备上的识别读取，定义了使残疾人更容易访问 web 内容和 web 应用程序（尤其是使用JavaScript开发的应用程序）的方法。

svg的使用

svg基于XML，它能被插入到html中并展示一些效果。viewBox是视图框，值为“0 0 250 250”

0表示相对于svg左上角的横坐标
0表示相对于svg左上角的纵坐标
250表示截取的视区的宽度
250表示截取的视区的高度

svg元素和视图框的大小是可以相互缩放适应的，我在视图框250x250里画的图，也会被缩放到svg元素80x80中，aria-hidden="true"表示这个SVG元素对屏幕阅读器是隐藏的。

svg中的path元素

path元素可以定义复杂的形状，d属性定义了路径的形状，这个属性的值由一系列的命令（字母）和参数（数字）组成，我会说最短最简单的那个🤭🤭（第一个path）

M0,0：M命令表示移动到一个新的位置，0,0是这个新位置的坐标。
L115,115：L命令表示从当前位置画一条直线到指定的位置，115,115是这个位置的坐标。
L130,115：再画一条直线到130,115。
L142,142：再画一条直线到142,142。
L250,250：再画一条直线到250,250。
L250,0：再画一条直线到250,0。
Z：Z命令表示关闭路径，也就是画一条直线回到路径的起点。

而fill=“currentColor”，它使用的是父元素的文本颜色；style=“transform-origin: 130px 106px;”，transform-origin用于指定变换（如旋转、缩放等）的原点。也就是说，所有的变换都将围绕这个点进行。

本组件css的描述

在style中使用了scoped属性，那么这个style标签中定义的CSS样式只会应用到这个组件的模板中。防止了样式冲突，独立了组件的样式。

关于hover

1. 元素 :hover 表示聚焦后改变自己
2. 元素 :hover 元素 表示聚焦后改变其子元素
3. 元素 :hover + 元素 表示聚焦后改变其指定的“亲兄弟”（相邻）元素
4. 元素 :hover ~ 元素 表示聚焦后改变其指定的元素（不相邻也行）

.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out
}

这里是第2种形式，所以它会向你招手哦。

@keyframes用于创建动画，octocat-wave是动画名，以下是动画的过程（挥手的动作）

1. 在动画的开始（0%）和结束（100%），元素的旋转角度是0度，也就是说，元素没有旋转。
2. 在动画的20%和60%的时候，元素被旋转了-25度。负角度表示元素是顺时针旋转。
3. 在动画的40%和80%的时候，元素被旋转了10度，也就是逆时针旋转。

@media是媒体查询是CSS3的一个特性，用于适配显示设备，当视口宽度小于或等于500px时，这个媒体查询中的CSS样式将被应用，总得来说，当你移动视口宽度，小于500px时，github会向你挥个手，然后你再怎么将鼠标悬浮在其上面都不会有反应了。

那么今天就到这里了，感觉今天的内容有点怪。这个在网上是可以找到的，大家可以搜搜。在下学艺不深，作诗著文之事，恐难没有疏忽，希望大家可以帮我一起改进文章，那么明天你会遇见更牛牛牛逼的深度好文。

明天会全面讲解
<panel-group @handleSetLineChartData="handleSetLineChartData" />组件