本文主要是介绍目录导航组件封装,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<template>
<div>
<el-row class="tac">
<el-col :span="4">
<h5>全部商品分类</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
>
<el-menu-item-group>
<el-menu-item index="1-1" style="position:relative">
<div @mouseenter="enterItem" @mouseleave="leaveItem">
<span> 品类1</span>
<span style="position:absolute;right:0"
><i class="el-icon-arrow-right"></i
></span>
</div>
</el-menu-item>
<el-menu-item index="1-2">
<span> 品类2</span>
<span style="position:absolute;right:0"
><i class="el-icon-arrow-right"></i
></span>
</el-menu-item>
<el-menu-item index="1-3">
<span> 品类3</span>
<span style="position:absolute;right:0"
><i class="el-icon-arrow-right"></i
></span>
</el-menu-item>
<el-menu-item index="1-4-1">
<span> 选项4</span>
<span style="position:absolute;right:0"
><i class="el-icon-arrow-right"></i
></span>
</el-menu-item>
</el-menu-item-group>
<!-- </el-submenu> -->
</el-menu>
</el-col>
<el-col :span="12">
<div v-show="showChildrenContent" class="childrenContent">
<template v-for="child in childrenList">
<el-row>
<el-col :span='3'>
<span style="line-height:40px">{{child.name}}</span>
<i class="el-icon-arrow-right"></i>
</el-col>
<el-col :span='12' >
<div v-if='child.children.length>0'>
<span v-for="innerChildren in child.children" style="margin:10px">{{innerChildren.name}}</span>
</div>
</el-col>
</el-row>
</template>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
props: [],
components: {},
data() {
return {
showChildrenContent: false,
//二级、三级目录内容 模拟数据
menuData: [
{
name: "一级菜单1",
pid: "1",
//pid == 0 为一级
children: [
{
name: "二级菜单1",
pid: "2",
children: [
{
name: "三级菜单1",
pid: "3",
},
{
name: "三级菜单2",
pid: "3",
},
{
name: "三级菜单3",
pid: "3",
},
],
},
],
},
],
childrenList: [
{
name: "二级菜单1",
pid: "2",
children: [
{
name: "三级菜单1",
pid: "3",
},
{
name: "三级菜单2",
pid: "3",
},
{
name: "三级菜单3",
pid: "3",
},
],
},
],
};
},
filter: {},
computed: {},
created() {},
mounted() {},
watch: {},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
enterItem() {
// console.log('enter');
this.showChildrenContent = true;
},
leaveItem() {
// console.log('leave');
this.showChildrenContent = false;
},
},
};
</script>
<style scoped>
.childrenContent {
border: 1px solid skyblue;
border-radius: 15px;
box-shadow: 0px 0px 5px skyblue;
margin-top: 70px;
width: 100%;
height: 400px;
}
</style>
这篇关于目录导航组件封装的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!