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 使用 AspectJ 的 AOP 配置管理事务

1. 概述 AspectJ 主要是使用 XML 配置顾问方式自动为每个符合切入点表达式的类生成事务代理。创建测试操作步骤如下&#xff1a; 2. 创建测试项目 创建一个名为 aspectj-aop 项目&#xff0c;pom.xml 文件如下&#xff1a; <?xml version"1.0" encoding"…

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

随着时代的发展和消费升级&#xff0c;调味品行业的竞争愈发激烈&#xff0c;在此大环境之下&#xff0c;企业需要不断寻找创新的突破点来实现销量的增长。众所周知&#xff0c;调味品行业的销售渠道主要有餐饮、家庭消费和食品加工&#xff0c;按销售额的占比约为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分支&#xff0c;如果想在新分支上开发代码&#xff0c;如何新建一个分支呢&#xff1f;5秒搞定~ 1、工具类选择git&#xff0c;点击New Branch 或者右下角点击git分支&#xff0c;再点击New Branch 2、在弹出的Create New Branch弹窗中&#xff0c;输入你的新分支…

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

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

linux性能监控之lsof

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

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

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

JAVA学习-练习试用Java实现爬楼梯

问题: 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 注意&#xff1a;给定 n 是一个正整数。 示例 1&#xff1a; 输入&#xff1a; 2 输出&#xff1a; 2 解释&#xff1a; 有两种方法可以爬到楼…

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

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

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

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

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

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

Mysql 创建索引

1. 在创建表时添加索引 在使用CREATE TABLE语句创建表的同时&#xff0c;可以直接定义索引。例如&#xff0c;创建一个包含索引的表&#xff1a; CREATE TABLE clothes (id INT PRIMARY KEY,c_brand VARCHAR(100),c_type VARCHAR(50),c_size VARCHAR(10),price DECIMAL(10, 2…

Android UI: 动画:属性动画

文章目录 定义两种创建方式 代码:直接创建Animator对象XML:加载xml文件API 类操作源码分析总结定义 一段时间内,属性值从A变化到B 属性可以是任何类的任何属性 两种创建方式 代码:直接创建Animator对象 XML:加载xml文件 xml文件在res/anim/目录下,使用R.anim.xxx获…

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

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

[力扣题解]122. 买卖股票的最佳时机 II

题目&#xff1a;122. 买卖股票的最佳时机 II 思路 贪心法&#xff1b; 计算出利润数组&#xff08;后一天卖出的钱-前一天买进的钱&#xff09;&#xff0c;把原问题转换为选择所有正利润的操作&#xff1b; 分解&#xff1a;想到最终利润可以分解&#xff0c;分解为每天的利…

GoogleGemini-AI预测2024系统分析师论文

Message From You: 系统分析师是全国计算机职业资格与水平考试高级别的一类考试&#xff0c;结合历年的论文考试题目以及当前流行的系统分析方便的问题。你能否预测几个2024年可能的论文题目&#xff1f; Message From ChatGPT: 2024 年系统分析师论文题目预测 基于云计算的…