layui 与 vue 混搭解决动态侧边栏

小灰灰 2022-11-02 11:48 122阅读 0赞

前置条件   1.  layui 的侧边栏 就不写了官网有 2. 有权限列表

1.引入 vue 和axios

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. 在所有的跳转导航上加上   自定义 的 class="menu"   data-id="与导航栏的名字一致"

<dd class="menu" data-id="酒店轮播图">
    	<a lay-href="page/hotel/content/homebannerlist.html">酒店轮播图</a>
    </dd>

3.  动态显示导航栏代码

<script>
    			var app = new Vue({
    				el: '#App',
    				data: {
    					message: "111"
    				},
    				created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
    					this.getAllList();
    				},
    				methods: {
    					getAllList() {
    						let menu = document.getElementsByClassName("menu");
    						let that = this
    						axios.post(findUserPermissionUrl,
    								        {"id":JSON.parse(localStorage.getItem("loginUser")).currentRole},
    								{
    									headers: {
    										'USER-ID': localStorage.getItem("userId"),
    										"USER-TOKEN": localStorage.getItem("jwtToken")
    									}
    								}).then(function (res) {
    									if(localStorage.getItem("roleCode")  != 5) {
    										let data = res.data.result
    										that.message = data
    										for (let menuKey in menu) {
    											if (menu[menuKey] == menu.length) {
    												break;
    											}
    											let str = menu[menuKey].getAttribute("data-id")
    											if (!data.includes(str)) {
    												menu[menuKey].remove()
    											}
    										}
    									}
    
    						});
    					}
    				}
    			})
    
    		</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读

相关 php侧边栏导航效果,bootstrap实现简单侧边导航栏效果

本篇文章给大家介绍一下bootstrap侧边导航栏的实现方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ![ec862e11c6ccf6a4cf431

梦里梦外;/ 2023年01月14日 04:57/ 0 赞/ 372 阅读

相关侧边导航栏

<template> <el-container style="height: 100vh" class="menu_container">

阳光穿透心脏的1/2处/ 2022年11月25日 10:12/ 0 赞/ 336 阅读

相关 layui 与 vue 混搭解决动态侧边栏

前置条件 1. layui 的侧边栏就不写了官网有 2. 有权限列表 1.引入 vue 和axios <script src="https://cdn

小灰灰/ 2022年11月02日 11:48/ 0 赞/ 122 阅读

相关 html侧边导航栏,浮动侧边导航栏的基本布局

先来一张效果图 ![a34e46fcb0a2][] 效果图 HTML JS Bin 头部内容左侧的一些内容首页学习中心考试中心考

短命女/ 2022年10月06日 11:46/ 0 赞/ 329 阅读

相关安卓侧边栏实现

安卓侧滑布局实现来,先上效果图 ![这里写图片描述][20160618153447587] package xiaolin.widget;

痛定思痛。/ 2022年08月22日 15:24/ 0 赞/ 322 阅读

相关 ace admi 三侧边栏

1.布局用于侧边栏的默认HTML布局是： ![sidebar.png][] 1. 快捷按钮：可选 2. .nav-list：包含侧边栏项目 3. 展开/

悠悠/ 2022年05月24日 14:10/ 0 赞/ 206 阅读

相关侧边栏实现思路

如果你们在实际写代码的情况遇见bug可以加我QQ私聊 229236940 侧边栏式例 ![在这里插入图片描述][20190605171854957.gif] 上

爱被打了一巴掌/ 2022年01月22日 08:27/ 0 赞/ 393 阅读

相关 vue-admin-template 修改侧边栏

(1) 注册路由 router.js---->添加或更改测边框的模块注意：模块的路径 (2) 在Views文件下增加相应的模块.vue (3) 在 conponen

港控/mmm°/ 2021年11月19日 12:12/ 0 赞/ 772 阅读

相关侧边栏组件(Vue)

从右侧滑入使用方法: 外部传入draw的键,且键值为true开启外部监听@changeShow事件,通过将传入的draw值改为

蔚落/ 2021年07月24日 20:29/ 0 赞/ 698 阅读

相关 CSS实现侧边栏导航

CSS实现侧边栏导航

小鱼儿/ 2021年05月03日 15:53/ 0 赞/ 669 阅读