使用Vue实现手风琴菜单效果
使用vue的指令个事件冒泡委托给一个事件处理
使用
props:{
menuList:{
type:Array,
default:""
},
initIndex:{
type:Number,
default:0
},
},
data() {
return {
pIndex:this.initIndex,
cIndex:0,
childHeight:0,
isActive:true,
isTransform:false
}
},
created(){
},
methods:{
clickHandle(event){
let isChild = true,pNum;
let parentTarget = getTarget(event,"menu-item");
let childTarget = getTarget(event,"child-item");
isChild =this.isTouchChild(childTarget);
pNum = dataSet(parentTarget,"val");
if(isChild){
this.cIndex = dataSet(childTarget,'val');
if(this.menuList[this.pIndex].children){
this.$emit("go-state",{
name:this.menuList[this.pIndex].children[this.cIndex].name,
path:this.menuList[this.pIndex].children[this.cIndex].path,
type:this.menuList[this.pIndex].children[this.cIndex].type
});
}
}else{
if(this.pIndex===pNum){
this.isActive=!this.isActive;
}else{
this.isActive = true;
this.pIndex = pNum;
}
this.cIndex = 0;
this.$emit("go-state",{
name:this.menuList[this.pIndex].name,
path:this.menuList[this.pIndex].path,
type:this.menuList[this.pIndex].type
});
}
},
isTouchChild(childTarget){
if(childTarget===NaN || childTarget===null || childTarget===undefined){
return false;
}else{
return true;
}
},
transformHandle(){
this.isTransform=!this.isTransform;
this.isActive=false;
this.$emit("fold-body",this.isTransform);
}
},
directives: {
slide: {
inserted:function(el,binding){
if(binding.value){
let height = el.scrollHeight;
el.style.cssText = `height:${height}px;`;
}
},
update: function (el,binding) {
let newVal = binding.value,oldVal=binding.oldValue;
if(newVal===oldVal){
return;
};
if(binding.value){
let height = el.scrollHeight;
el.style.cssText = `height:${height}px;`;
}else{
el.style.cssText=`height:0;`;
}
},
}
},
.c-vertical{
font-size: 16px;
width: 200px;
position: relative;
height: 100%;
&:after{
content: "";
display: block;
width: 1px;
height: 100%;
background: #dcdee2;
position: absolute;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
}
>ul{
position: absolute;
top: 0;
left: 0;
right: 0;
}
.menu-item >ul{
height: 0;
overflow: hidden;
transition: height 0.3s ease-in-out;
}
.menu-item a{
position: relative;
display: block;
height: 45px;
line-height: 45px;
padding-left: 15px;
width:auto;
color: #515a6e;
}
.menu-item >a i:first-child{
position: absolute;
}
.menu-item >a i:last-child{
float: right;
margin-right: 20px;
transition: all 0.3s ease-in-out;
}
.menu-item a >span{
margin-left: 30px;
}
.parent-active > a{
color: #ff9900;
background-color: #f0faff;
&:before {
content: "";
position: absolute;
left: 0;
width: 2px;
height: 45px;
background: #34a0ce;
opacity: 1;
transition: all .3s;
}
}
.child-active a{
color: #ff9900;
background: #f3f3f3;
}
.child-item a >span{
margin-left: 30px;
}
.menu-item >a .rotate-icon{
transform: rotate(90deg);
}
.fold-bottom{
position: absolute;
bottom: 0;
line-height: 40px;
height: 40px;
background: #f0faff;
width: 100%;
transition: width 0.3s ease-in-out;
span{
position: relative;
width: 100%;
height: 40px;
display: block;
}
i{
position: absolute;
transform: rotate(0deg);
width: 100%;
text-align: center;
height: 40px;
transition: all 0.3s ease-in-out;
}
.fold-icon{
transform: rotate(-180deg);
}
}
.transform-min{
width: 40px;
}
}