vue封装门户网站的下拉滑动组件

首先，我们先看看想要实现的效果，

具体参照也是可以参照阿里云的首页产品那一块的图，阿里云

现在我们直接上代码

• template

<el-popover
          ref="popoverDrawer"
          placement="bottom-start"
          :visible-arrow="false"
          trigger="hover"
          class="left-son"
          popper-class="popper-class"
          @show="showPopover"
          @hide="hidePopover"
        >
          <div class="self-drewer main-nav">
            <div class="nav-first" @mouseenter="isNavEnter = true" @mouseleave="isNavEnter = false">
              <ul>
                <li
                  v-for="item in linkUData"
                  :key="item.name"
                  :class="{active: item.name === selected}"
                  @mouseenter="selected = item.name"
                >
                  <p>
                    <span>{{item.title}}</span>
                  </p>
                </li>
              </ul>
            </div>

            <div
              class="nav-sec"
              v-show="isNavEnter || isMenuEnter"
              @mouseenter="isMenuEnter = true"
              @mouseleave="isMenuEnter = true"
            >
              <ul
                v-for="item in linkUData"
                v-show="item.name === selected"
                :key="item.id"
                class="rowClass"
              >
                <li v-for="(key,index) in item.children" :key="index" class="columnClass">
                  <h4 style="color:#409eff">{{key.title}}</h4>
                  <!-- <div class="lidev"> -->
                  <div v-for="routerTit in key.children" :key="routerTit.id" class="routerTitClass">
                    <a
                      v-if="index + 1 != item.children.length"
                      @click="menuCli(routerTit.id, routerTit.title,routerTit.name)"
                    >{{routerTit.hidden?'': routerTit.title }}</a>

                    <a
                      v-else
                      :href="routerTit.redirect"
                      target="_blank"
                    >{{ routerTit.hidden?'': routerTit.title }}</a>
                  </div>
                  <!-- </div> -->
                </li>
              </ul>
            </div>
          </div>

          <div slot="reference" class="other">
            乐信云服务
            <i
              class="el-icon--right icon-arrow"
              :class="
                is_arrow_hover ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            ></i>
          </div>
        </el-popover>

• data

 is_arrow_hover: false,
 selected: "database",
  isNavEnter: true,
  isMenuEnter: true,

• methods

showPopover() {
      this.is_arrow_hover = true;
    },
    hidePopover() {
      this.is_arrow_hover = false;
    },
    //点击跳转的一个方法
    menuCli(id, title, name) {
      //跳转到具体的地址即可
      setTimeout(() => {
        this.$router.replace({ name: name });
      }, 100);
      this.$refs.popoverDrawer.showPopper = false;
      this.dialogFormVisible = false;

      let backlen = window.history.length + 1;
      window.history.go(-backlen);
    }

• css

.self-drewer {
  box-sizing: border-box;
  padding: 10px 60px;
  width: 100%;
  z-index: 999;
  }
.main-nav {
  //height: 250px;
  font-size: 14px;
  width: 100%;
  background: #fff;

  position: relative;
  display: flex;
  justify-content: flex-start;
  > .nav-first {
    width: 160px;

    ul {
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      // color: #fff;
      li {
        padding-left: 10px;
        // font-size: 16px;
        border-bottom: transparent solid 2px;
        font-weight: bold;
        cursor: pointer;
        // &:hover {
        //   background: #ecf5ff;
        //   border-bottom: #409eff solid 2px;
        //   color: #409eff;
        //   transition: border 0.2s;
        // }

        > p {
          display: flex;
          justify-content: space-between;
          > .icon {
            //margin-right: 20px;
            font-weight: bold;
          }
        }
      }
      .active {
        background: #ecf5ff;
        border-bottom: #409eff solid 2px;
        color: #409eff;
        transition: border 0.2s;
      }
    }
  }
  .nav-sec {
    background: #fff;
  }
}
.rowClass {
  display: flex;
  justify-content: flex-start;
  height: 100%;
  flex-direction: row;
  border-left: #e4e7e4 1px solid;
}

.columnClass {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: default;
  min-width: 200px;
}
// .columnClass > :last-child {
//   border: #e4e7e4 1px solid;
// }

.routerTitClass {
  a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: color 0.2s;
    width: 100%;
    padding: 4px 0;
    text-decoration: none;
    text-align: left;
    color: #181818;
    height: 30px;
    // text-align: center;
    line-height: 30px;
    &:hover {
      color: #409eff;
      font-weight: bold;
      animation: animate 0.5s ease-out;
    }
    @keyframes animate {
      0% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-5px);
      }
      100% {
        transform: translateY(0px);
      }
    }
  }
}