仿element-ui搭建官网页面

最近做了一个基于element-ui的组件，做样式文件的二次封装，公司要求出一个类似于element-ui官网的效果。效果图如下

由于技术比较菜，我觉得难得地方有亮点，全部集中在图中我剪头所指的部分，，第一个是鼠标hover的时候，显示代码/隐藏代码的动画效果  第二个是当代码区域过长，底部的显示代码/隐藏代码处于固定在底部的状态。当页面滚动之后足矣展示整个代码区域的代码，则取消固定定位，跟随父盒子一起滚动。

直接放整个组件代码吧，懒得分析了

<template>
<div class='code-wrapper'  @mouseenter="handleEnter" @mouseleave="handleLeave">
  <!-- <button @click.stop="handleClick">点我出现动画</button> -->
  <!-- 介绍文字部分得插槽 -->
  <div class="source">
      <slot name="source"></slot>
  </div> 
  <div class="meta" v-show="showCode" ref="meta">
    <div class="description" v-if="isShowDesc">
      <slot name="description">

      </slot>
    </div>
    <div class="codehighlight">
      <slot name="codehighlight">

      </slot>
    </div>
  </div>
  <div :class="['demo-block-control',isFixed ? 'isFixed':'']" @click="showCodeSni">
    <i v-if="!showCode" :class="['el-icon-caret-bottom',isHovering ? 'isHovering':'']"></i>
    <i v-if="showCode" :class="['el-icon-caret-top',isHovering ? 'isHovering':'']"></i>
    <transition>
      <span v-if="!showCode &&　isHovering" class="codeText">显示代码</span>
      <span v-if="showCode &&　isHovering" class="codeText">隐藏代码</span>
    </transition>
  </div>
</div>
</template>

<script>
export default {
  name:'codeSnippet',
  data(){
    return {
      showCode:false,
      isHovering:false,
      isFixed:false,
      scrollParent:null,//全屏滚动元素
    }
  },
  props:{
    // 是否展示组件描述部分
    isShowDesc:{
      type:Boolean,
      default:true
    }
  },
  methods: {
    showCodeSni(){
      this.showCode = !this.showCode
      if(this.showCode){
        // 判断代码区域是否超出当前屏幕，如果超出，则固定按钮在底部显示
        this.$nextTick(()=>{
          const objPosition = this.$refs.meta.getBoundingClientRect()
          const {top,left,bottom }= objPosition
          console.log(objPosition,top,left,bottom)
          if(top < document.documentElement.clientHeight && bottom+47 > document.documentElement.clientHeight){
            this.isFixed = true
            // 给页面滚动条绑定滚动事件
            this.scrollParent = document.querySelector(".page-component__scroll > .el-scrollbar__wrap")
            this.scrollParent && this.scrollParent.addEventListener("scroll", this.scrollHandler)
          } else {
            this.isFixed = false
          }
        })
      } else {
        this.isFixed = false
      }
    },
    // 页面滚动事件
    scrollHandler(){
      const objPosition = this.$refs.meta.getBoundingClientRect()
      const {top,left,bottom }= objPosition
      console.log(objPosition,'scroll',this.$refs.meta)
      if(top < document.documentElement.clientHeight && bottom+47 > document.documentElement.clientHeight){
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    },
    beforeDestroy(){
      this.removeScrollHandler()
    },
    removeScrollHandler(){
      this.scrollParent && this.scrollParent.removeEventListener("scroll", this.scrollHandler)
    },
    // 当鼠标进入查看代码区域
    handleEnter(){
      this.isHovering = true
    },
    handleLeave(){
      this.isHovering = false
    }
  },
}
</script>
<style  scoped lang='scss'>
.code-wrapper {
  // border:1px solid #DCE1E8;
  // border-radius: 2px;
  margin-top: 20px;
  transition: all .2s linear;
  &:hover {
    box-shadow: 0 0 8px 0 rgba(232,237,250,.6),0 2px 4px rgba(232,237,250,.5);
  }
  .source {
    padding:24px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border: 1px solid #ebebeb;
  }
  .meta {
    background-color: #fafafa;
    padding:15px;
    overflow: hidden;
    border-right: 1px solid #DCE1E8;
    border-left: 1px solid #DCE1E8;
    .description{
      padding: 20px;
      box-sizing: border-box;
      border: 1px solid #ebebeb;
      border-radius: 3px;
      font-size: 14px;
      line-height: 22px;
      color: #666;
      word-break: break-word;
      background-color: #fff;
    }
    .codehighlight {
      // 代码展示部分得显示
      font-size: 13px;
      >>> code {
        line-height: 20px;
      }
    }
  }
  .demo-block-control {
    height: 46px;
    line-height: 46px;
    text-align: center;
    border: 1px solid #DCE1E8;
    color:#DCE1E8;
    align-items: center;
    position: relative;
    margin-top: -1px;
    background-color: #fff;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    .el-icon-caret-bottom,.el-icon-caret-top{
      transition: transform .3s linear; 
    }
    >span {
      font-size: 14px;
      display: inline-block;
      position: absolute;
      left: 49%;
    }
    .isHovering {
      transform: translateX(-25px);
    }
    &:hover {
      background-color: #f9fafc;
      color:#0B61DB
    }
    &.isFixed {
      position: fixed;
      bottom: 0;
      width: 100%;
      max-width: 898px;
      border-right: 1px solid #DCE1E8;
    }
  }
  >>> .el-divider--vertical {
    height: 100px;
  }
}
.v-enter-active {
    // 整个动画得过程中得过渡时间是多久
  animation: shake .3s linear;
}
.v-leave-active {
  animation: shake2 .3s linear;
}
@keyframes shake {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes shake2 {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(30px);
    opacity: 0;
  }
}
</style>