目录导航组件封装

本文主要是介绍目录导航组件封装，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<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>

这篇关于目录导航组件封装的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！