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

小灰灰 2022-11-02 11:48 125阅读 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 条评论，125人围观）

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

相关阅读

相关 requireJs sass侧边栏

koala 下载将sass编译为css文件 1 嵌套 2 $变量 3 @mixin 函数名(参数) 4 @include 函数调用 5 @import "xxx"

爱被打了一巴掌/ 2023年08月17日 16:20/ 0 赞/ 135 阅读

相关 21Flutter Drawer侧边栏、以及侧边栏内容布局

Tabs.dart import 'package:flutter/material.dart'; import 'tabs/Home.dart';

落日映苍穹つ/ 2023年08月17日 15:59/ 0 赞/ 141 阅读

相关小米侧边栏--css

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

悠悠/ 2023年07月02日 09:26/ 0 赞/ 54 阅读

相关侧边导航栏

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

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

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

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

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

相关 vue element menu侧边导航栏

<template>  <!--unique

港控/mmm°/ 2022年10月29日 14:25/ 0 赞/ 58 阅读

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

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

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

相关侧边栏实现思路

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

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

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

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

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

相关侧边栏组件(Vue)

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

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