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

news2024/11/15 19:27:08

在这里插入图片描述
在前端开发中,我们常常需要为 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.coloradmin.cn/o/1663152.html

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

相关文章

政安晨:【Keras机器学习示例演绎】(四十二)—— 使用 KerasNLP 和 tf.distribute 进行数据并行训练

目录 简介 导入 基本批量大小和学习率 计算按比例分配的批量大小和学习率 政安晨的个人主页:政安晨 欢迎 👍点赞✍评论⭐收藏 收录专栏: TensorFlow与Keras机器学习实战 希望政安晨的博客能够对您有所裨益,如有不足之处,欢迎在…

电脑文件找回恢复软件分享,3款软件助力数据恢复!

使用电脑时一不小心就删除了重要文件?想找回数据却不知道应该怎么操作?众所周知,电脑的使用已经成为我们工作、学习和生活中不可或缺的工具,但是在操作时误删文件是令很多用户都头疼的问题。 怎么恢复电脑里被删除的文件呢&#…

LabVIEW天然气压缩因子软件设计

LabVIEW天然气压缩因子软件设计 项目背景 天然气作为一种重要的能源,其压缩因子的准确计算对于流量的计量和输送过程的优化具有关键意义。传统的计算方法不仅步骤繁琐,而且难以满足现场快速响应的需求。因此,开发一款既能保证计算精度又便于…

一个开源即时通讯源码

一个开源即时通讯源码 目前已经含服务端、PC、移动端即时通讯解决方案,主要包含以下内容。 服务端简介 不要被客户端迷惑了,真正值钱的是服务端, 服务是采用Java语言开发,基于spring cloud微服务体系开发的一套即时通讯服务端。…

【XR806开发板试用】试用SWD+Jlink调试

XR806开发板,只能使用编写代码,然后通过UART下载,没法在线debug, 效率会差很多,官方没有提供这一方面的资料。 先查CPU, 官方介绍是arm-china的MC1,通过armv8 Architecture refenence manual资料…

linux打包流程

因为linux有俩个python版本,我们需要切换到python3这个版本,默认是python 2.7 alias pythonpython3 切换到python3 再次执行:python -V 显示出python的版本了,然后查看pip的配置,我们打包里面需要的第三方需要放到pip…

使用IDA自带python patch的一道例题

首先看见就是迷宫 迷宫解出的路径,放在zip的文件可以得到一个硬编码 然后在原程序中,有一处很离谱 这个debugbreak就是IDA分析错误导致的 我们点进去发现里面全是nop 然后我们把我们得到的硬编码放在010里面,再用IDA打开 重新编译看汇编 你…

高性能运营级流媒体服务框架:支持多协议互转 | 开源日报 No.250

ZLMediaKit/ZLMediaKit Stars: 12.6k License: NOASSERTION ZLMediaKit 是一个基于 C11 的高性能运营级流媒体服务框架。 使用 C11 开发,避免裸指针,代码稳定可靠,性能优越。支持多种协议 (RTSP/RTMP/HLS/HTTP-FLV/WebSocket-FLV/GB28181 等…

JavaEE之线程(3)_线程的开始、中断、等待、休眠线程、线程的状态

前言 在本栏的上一节(https://blog.csdn.net/2301_80653026/article/details/138500558),我们重点讲解了五种不同的创建线程的方式,我们还介绍了Tread类的常见构造方法和常见属性,在这一节中我们将会继续介绍Tread类。…

5/11后面部分:+顺序排序+元素交换+计算每门课程的各种成绩+存放规律的数据 注意:一味的复制肯定要出问题,第2个的最后一部分有修改,注意观察

目录 第一个已经输出过一次: 第二个: 编程实现:程序功能是用起泡法对数组中n个元素按从大到小的顺序进行排序。 ​编辑的确出现了一些问题哦: ​编辑目前是可以运行,但AI不给我们通过: 最后还是我的代码获胜&#x…

苹果电脑怎么安装crossover 如何在Mac系统中安装CrossOver CrossOver Mac软件安装说明

很多Mac的新用户在使用电脑的过程中,常常会遇到很多应用软件不兼容的情况。加上自己以前一直都是用Windows系统,总觉得Mac系统用得很难上手。 其实,用户可以在Mac上安装CrossOver,它支持用户在Mac上运行Windows软件,例…

C++牛客小白月赛题目分享(1)生不逢七,交换数字,幻兽帕鲁

目录 1.前言 2.三道题目 1.生不逢七 1.题目描述 2.输入描述: 3.输出描述: 4.示例: 5.题解: 2.交换数字 1.题目描述: 2.输入描述: ​编辑 3.输出描述: 4.示例: 5.题解: 3.幻兽帕…

开源基金会AtomGit教程

大家伙,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。 注册 点击链接进入官网,先注册,然后登录:https://atomgit.com/ 编辑个人资料,修改一下自己的信息,用户名后面提交代码的时候要…

frida反检测

一、frida介绍 简单来说,Frida是一个动态代码插桩框架。这意味着它能够在程序运行的时候,不改变原有程序代码的情况下,让你往里面添加自己的代码片段。这听起来可能有点像魔法,但实际上,它是通过一种叫做“HOOK”的技术…

解构复合人工智能系统(Compound AI Systems):关键术语、理论、思路、实践经验

编者按: 大模型的出现为构建更智能、更复杂的人工智能系统带来了新的契机。然而,单一的大模型难以应对现实世界中错综复杂的问题,需要与其他模块相结合,构建出复合人工智能系统(Compound AI Systems)。 本文…

wordpress 访问文章内容页 notfound

解决&#xff1a; 程序对应的伪静态规则文件.htaccess是空的 网站根目录下要有 .htaccess 文件&#xff0c;然后将下面的代码复制进去。 <ifmodule mod_rewrite.c>RewriteEngine OnRewriteBase /RewriteRule ^index\.php$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRew…

AI领域最伟大的论文检索网站

&#x1f4d1; 苏剑林&#xff08;Jianlin Su&#xff09;开发的“Cool Papers”网站旨在通过沉浸式体验提升科研工作者浏览论文的效率和乐趣。这个平台的核心优势在于利用Kimi的智能回答功能&#xff0c;帮助用户快速了解论文的常见问题&#xff08;FAQ&#xff09;&#xff0…

STL-Setmap

前言 大家好&#xff0c;我是jiantaoyab&#xff0c;我们将进入到CSTL 的学习。STL在各各C的头文件中&#xff0c;以源代码的形式出现&#xff0c;不仅要会用&#xff0c;还要了解底层的实现。源码之前&#xff0c;了无秘密。 STL六大组件 Container通过Allocator取得数据储存…

多标签分割

https://github.com/PaddlePaddle/PaddleSeg/blob/release/2.9/configs/multilabelseg/README_cn.md

el-select选项框内容过长

利用popper-class实现选项框内容过长&#xff0c;截取显示功能&#xff1a; <el-select popper-class"popper-class" :popper-append-to-body"false" v-model"value" placeholder"请选择"><el-optionv-for"item in opt…