记一次vue--NavMenu--左侧导航栏动画效果折腾记

前沿

小编最近在做公司的后台管理项目中，使用到element-ui作框架，其中使用到element-ui的navbar左侧菜单栏导航，发现有一些需求是其不能满足的，于是乎痛定思痛就自己动手搞了一个，过程中发现自己的不足之处，遂记录下来，毕竟好记性不如烂笔头吗？

---

声明

---

本效果在实现过程中操作了dom，这是令小编头疼的地方，但是苦于现在没有找到好的解决办法，所以暂时先拿这个上项目了，(时间紧迫，项目赶的紧，以后有时间更新)，请忽略丑陋的外表，这只是一个demo，在应用时修改就好了。这个暂时还有一些不满意的地方，后期有时间慢慢改正

---

代码

1，新建一个slideBar.vue组件，代码如下：

  <template>
  		<div class="MBslidebar">
			<div class="Mitem" v-for="(item,index) in mydata">
				<div class="MitemTitle" @click="MitemT(item,index)">
					<span>{{item.name}}</span>
					<span>{{item.names}}</span>
					<span class='el-icon-arrow-down myicon' :class="[item.isshow?'go':'aa']">45</span>
				</div>

				<div class="MitemChildren" ref="mychild">
					<div class="culldown">
						<div class="MitemChildrenLis" v-for="events in item.madataC">
							<span>{{events.age}}</span>
							<span>8</span>
						</div>
					</div>
				</div>


			</div>

			</div>
  </template>
  <script>
export default {
	props:['sliderdata'],
  data() {
    return {
      isshow: false,
      IconRotate: false,
      mydata:this.sliderdata
    };
  },
  methods: {
    MitemT(item, index) {
      let AllHiden = this.$refs.mychild;
      let eleBack = this.$refs.mychild[index];
      let eleMore = this.$refs.mychild[index].childNodes[0];
      let eleMoreHeight = eleMore.offsetHeight;
      for (var i = 0; i < AllHiden.length; i++) {
        AllHiden[i].style.height = "0px";
        this.mydata[i].isshow = false;
      }
      //  每次点击时都要记录上次点击的状态，然后设置与上次相反的状态，就是为了再次点击nav的时候可以关闭。
      item.isshow = true;
      item.isshow = item.IconRotate == item.isshow ? false : true;
      item.IconRotate = item.isshow;
      // 在这判断如果当前记录下的状态与数据中的状态不同，就关闭当前下拉框
      if (!item.IconRotate) {
        eleMoreHeight = 0;
      }
      eleBack.style.height = eleMoreHeight + "px";
    }
  }
};
</script>
  <style>
.MBslidebar {
  width: 200px;
  height: 100%;
  border: 1px solid;
}

.myicon {
  color: red;
}

.Mitem {
  width: 210px;
}

.MitemTitle {
  width: 200px;
  height: 50px;
  border: 1px solid blue;
  display: flex;
  align-items: center;
}

.MitemChildren {
  width: 200px;
  /*border: 1px solid red;*/
  height: 0;
  position: relative;
  overflow: hidden;
  -webkit-transition: height 0.6s;
  -moz-transition: height 0.6s;
  -o-transition: height 0.6s;
  transition: height 0.6s;
}

.MitemChildrenLis {
  width: 200px;
  height: 50px;
  border: 1px solid green;
  display: flex;
  align-items: center;
}

.aa {
  transition: all 1s;
}

.go {
  transform: rotate(-180deg);
  transition: all 1s;
}
</style>
	

2,然后在新建一个父组件，就是你要引用的组件，我起名为main.vue.

<template>
// 注册完组件，传入你自己的数据
<slidebar :sliderdata="sldeData"></slidebar>
</template>
import slidebar from "./SlideBar.vue"
  export default {
components:{
   slidebar
},
}

3,然后就大功告成了，有什么不足的地方希望多多指正,有什么需要改进的地方还望多多教导。希望可以帮助到大家，一块分享学习。

4，
最近在项目开发中由于需求不同于是搞了一个灵活性比较大的折叠面板
类似于element-ui Collapse 折叠面板也可以认为是手风琴效果