vue布局设置——使用 el-drawer 打造个性化 Admin 后台布局设置

在这里插入图片描述
在前端开发中,我们常常需要为 admin 后台构建灵活且个性化的布局设置。今天,我要分享的是如何利用 el-drawer 来实现这样一个有趣的功能。

首先,我们来看一下主要的设置参数:

 1. theme: 用于定义主题,可以根据需求切换不同的视觉风格。2. layout: 布局模式的选择,为后台提供多种呈现方式。3. headFloatSwitch: 控制头部是否浮动,以满足不同的交互需求。4. headerAbility:头部功能通过多选框的形式提供了丰富的可定制性。5. progressBarSwitch: 加载进度条的开关,让用户能直观地了解加载状态。6. labelSwitch: 标签开关,方便根据实际需要显示或隐藏标签。 7. labelIconSwitch: 决定标签是否显示图标,增强界面的可视化效果。8. labelStyleSwitch: 可以自定义标签样式,使界面更具独特性。9. columnStyle: 分栏样式,尤其在分栏布局和综合布局中发挥重要作用。 10.pagLoadingAnimationSwitch:加载动画效果的开关,为用户带来更流畅的交互体验。

通过巧妙地组合和调整这些设置,我们能够打造出符合各种业务场景和用户偏好的 admin 后台布局。

第二步就是存入缓存、在你的代码中加入判断来执行不同的效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/12048.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【已解决】attributeerror: ‘FreeTypeFont‘ object has no attribute ‘getsize‘

😎 作者介绍:我是程序员行者孙,一个热爱分享技术的制能工人。计算机本硕,人工制能研究生。公众号:AI Sun,视频号:AI-行者Sun 🎈 本文专栏:本文收录于《AI实战中的各种bug…

ctfshow web入门 phpCVE web312web314

web311 web312 IMAP协议(因特网消息访问协议)它的主要作用是邮件客户端可以通过这种协议从邮件服务器上获取邮件的信息,下载邮件等。它运行在TCP/IP协议之上,使用的端口是143,在php中调用的是imap_open函数来实现功能…

学习java

在实验室看见这本书,无聊看了下,写出了第一个java代码 成功下载了eclipse并且汉化。 写了自己的第一个java程序: package ttttt;public class ttttt {public static void main(String[] args) {System.out.println("hello world")…

Unreal自定义字体中,缺少字怎么办,有没有字表?

关键词:自定义字体,字表,编码,UTF-8,4E00-9FFF,4E00-9FA5,字符查重,字符唯一, 问题: 游戏中经常要自定义字体, 自定义字体往往要做离线字库 offline fonts 离线字库 离不开字符表。…

调味品企业的销量增长秘诀:五丰黎红引领大厨革新之路

随着时代的发展和消费升级,调味品行业的竞争愈发激烈,在此大环境之下,企业需要不断寻找创新的突破点来实现销量的增长。众所周知,调味品行业的销售渠道主要有餐饮、家庭消费和食品加工,按销售额的占比约为6&#xff1a…

[JAVASE] 类和对象(二)(续篇)

目录 一. static 修饰成员方法 1.1 基本使用 1.2 注意事项 (重点) 1.2.1 1.2.1 二. 代码块 2.1 代码块的分类及使用 2.1.1 静态代码块 2.1.2 实例代码块 2.1.3 普通代码块 2.2 代码块的执行顺序 三. 对象的打印 3.1 打印对象的引用 3.2 重写 toString 方法 四. 总结 一…

idea上如何新建git分支

当前项目在dev分支,如果想在新分支上开发代码,如何新建一个分支呢?5秒搞定~ 1、工具类选择git,点击New Branch 或者右下角点击git分支,再点击New Branch 2、在弹出的Create New Branch弹窗中,输入你的新分支…

el-table组件选中后使用toggleRowSelection无法取消已选中的数据——bug记录-骚操作解决

先说本文重点解决的问题: 存在的问题:当右侧已选中的数据中,删除了左侧其他页面的数据,但是左侧数据切换到其他页面后,左侧还保留选中的状态。 最近在写后台管理系统的时候,遇到一个需求: 左…

linux性能监控之lsof

lsof:list open files,显示所有打开的文件以及进程信息,我们通常用来检查特定的文件被哪些进程打开 [rootk8s-master ~]# lsof --help lsof: illegal option character: - lsof: -e not followed by a file system path: "lp" lso…

网络工程师----第二十七天

计算机基 第四章:网络层 网络层提供服务的特点:网络层向上只提供简单的、无连接的、尽最大努力交付的数据报服务,不保证可靠通信。 网际协议IP: *地址解析协议ARP(Address Resolution Protocol) *网际控制报文协议ICMP(Inter…

长图拼接技巧大揭秘:轻松实现横向拼接,一键批量处理方法

在数字化时代,我们经常会遇到需要将多张图片拼接成一张长图的情况,无论是用于制作海报、展示报告,还是制作社交媒体上的长图故事,掌握长图拼接的技巧都显得尤为重要。本文将为大家揭秘长图拼接的实用技巧,并介绍办公提…

React脚手架,配置环境变量(生产模式,开发模式)

项目搭建方式:react脚手架(create-react-app) 1. 下载依赖: npm install dotenv npm install dotenv-expandnpm install dotenv-cli -S 2.配置环境变量: 项目根部录下创建文件.env .env.pro .env.dev 配置package.json - scripts…

群晖 Synology DSM7 过热关机解决方法

最近已经提示我过热关机过两次了,这两次一次是用虚拟机,一次是批量使用Synology Photos批量上传照片: 但是我没有对主机进行任何的位置移动以及硬件修改操作,散热环境没有发生变化。以前使用从来没有出现过这个问题,同…

聚水潭和金蝶云星空单据接口对接

聚水潭和金蝶云星空单据接口对接 对接系统:金蝶云星空 金蝶K/3Cloud(金蝶云星空)是移动互联网时代的新型ERP,是基于WEB2.0与云技术的新时代企业管理服务平台。金蝶K/3Cloud围绕着“生态、人人、体验”,旨在帮助企业打造…

自集成式 HTTP 代理方案

前言 大部分程序员,想必都会有一个常用的抓包代理工具; 但在座的各位,可曾见过这样一款集成在 Web 应用中的代理工具? ​,时长00:45 它是明显区别于传统代理工具的,有以下特性: 零安装、零配…

解析流中 apts 与 vpts的分布

流中 apts 与 vpts的分布情况,同时使用图显示出来 一,最好的方式是使用EasyICE 来查看,这个自动化工具是很好用的: 二, 当EasyICE不能打出理想的数据的时候,可以自己来提取数据,画出对应的图&a…

tomcat--安装

官网:Apache Tomcat - Welcome! 官网文档:Apache Tomcat 8 (8.5.100) - Documentation Index 帮助文档:Apache Tomcat Home - Apache Tomcat - Apache Software Foundation FAQ - Apache Tomcat - Apache Software Foundation yum安装 查…

OpenNJet:引领下一代云原生应用引擎

文章目录 一、前言二、什么是OpenNJet 应用引擎三、OpenNJet的优势3.1 性能无损动态配置3.2 灵活的CoPilot框架3.3 支持HTTP/33.4 支持国密3.5 企业级应用3.6 高效安全 四、centos 安装4.1 生成njet.repo4.2 更新yum 缓存4.3 安装 njet 或 njet-otel 五、OpenNJet配置与部署5.1…

岩土工程监测仪器之一:振弦采集仪的工作原理解析

岩土工程监测仪器之一:振弦采集仪的工作原理解析 河北稳控科技振弦采集仪是岩土工程监测中常用的一种仪器,用于测量地面、结构物或其他物体的振动情况。它通过感应振弦的振动来获取相关的数据,进而分析和评估土壤、地基或结构物的稳定性和安…

用户登录认证和权限授权(SpringSecurity、JWT、session)

文章目录 前言一、登录认证1. 问题引入2. Session2.1 实现原理2.2 过滤器Filter2.3 上下文对象 3. JWT3.2 实现步骤3.3 拦截器 HandlerInterceptorAdapter3.4 上下文对象 4. Session VS JWT 二、权限授权1. 权限类型1.1 页面权限(菜单项权限)1.2 ACL模型…