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.mfbz.cn/a/612246.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java入门基础学习笔记15——强制类型转换

大范围类型的变量是否可以赋值给小范围类型的变量呢? IDEA直接报错。直接报错,是提醒你有问题。但是我非常进行类型转换。 非要强行赋值呢? 强制类型转换,强行将类型范围大的变量,数据赋值给类型范围小的变量。 数据…

若依生成树表和下拉框选择树表结构(在其他页面使用该下拉框输入)

1.数据库表设计 生成树结构的主要列是id列和parent_id列,后者指向他的父级 2.来到前端代码生成器页面 导入你刚刚写出该格式的数据库表 3.点击编辑,来到字段 祖籍列表是为了好找到直接父类,不属于代码生成器方法,需要后台编…

数据挖掘(二)数据预处理

前言 基于国防科技大学 丁兆云老师的《数据挖掘》 数据挖掘 数据挖掘(一)数据类型与统计 2、数据预处理 2.1数据清理 缺失值处理: from sklearn.impute import SimpleImputer# 创建一个SimpleImputer对象,指定缺失值的处理策略…

day07beef-xss之根据beef-xss获取cookies

1.安装 apt-get update apt-get install beef-xss 若报错运行不了尝试 apt remove ruby apt remove beef-xss apt-get install ruby apt-get install ruby-dev libpcap-dev gem install eventmachine apt-get install beef-xss 2.运行 beef-xss 运行成功会自动弹出浏览框。 攻…

WM Transaction Code 仓库管理模块事务代码大全

1.1 LE-WM 仓库管理 Warehouse Management 仓库管理事务码 描述 LB01 Create Transfer Requirement 创建转储需求 LB02 Change transfer requirement 修改转储需求 LB03 Display Transfer Requirement 显示转储需求 LB10 TRs for Storage Type 按仓储类型的转储请求 …

一次完整的GC流程

Java堆中内存区分 Java的堆由新生代(Young Generation)和老年代(Old Generation)组成。新生代存放新分配的对象,老年代存放长期存在的对象。 新生代(Young)由年轻区(Eden&a…

uniapp开发微信小程序,选择地理位置uni.chooseLocation

<view click"toCommunity">点击选择位置</view>toCommunity() {const that thisuni.getSetting({success: (res) > {const status res.authSetting// 如果当前设置是&#xff1a;不允许&#xff0c;则需要弹框提醒客户&#xff0c;需要前往设置页面…

linux开发笔记(buildroot 增加自己的开发板支持文件)

1、该笔记参考了mangopi r3的buildroot。某宝上卖的LC-PI-200S提供的buildroot就是这个。已经上传到我的资源中&#xff0c;可以下载看看。 2、首先在buildroot目录输入make menuconfig打开buildroot配置。 进入build options查看 可以看到第二行就是buildroot配置的保存位置…

STM32_HAL_RTC_中断实现闹钟

1STM32设置 在STM32Cude中设置RTC//具体设置看先前发的文章 再打开闹钟中断&#xff08;如下图&#xff09; 2代码思路 2.1启动闹钟&#xff08;HAL_RTC_SetAlarm_IT(&hrtc,&sAlarm,FORMAT_BCD)&#xff09; 2.2设置回调函数&#xff08;void HAL_RTC_AlarmAEventC…

指针(脑图梳理)

今天让我们来梳理一下指针都有哪些概念吧 这个脑图是整理的一些指针相关知识的概念&#xff0c;希望对大家有帮助

uni-app(二):本地插件使用(Android)

本地插件使用 项目创建等参考1.下载并引用本地插件2.注意插件配置3.制作自定义基座4.编写调用代码5.运行 项目创建等参考 https://lprosper.blog.csdn.net/article/details/138655526 1.下载并引用本地插件 2.注意插件配置 3.制作自定义基座 4.编写调用代码 <template>…

leetcode刷题——设计循环链表

题目要求我们设计循环队列&#xff0c;其特点是容量固定&#xff0c;队列循环&#xff0c;如图所示&#xff1a; 这里的队列我们以链表队列举例&#xff0c;对于循环&#xff0c;只需要把尾节点的指针指向头节点。重点是队列的容量固定&#xff1a;如何确定队列是否已满和空&am…

ExcelVBA取序号与合计之间的数据

今天有人提出这样一个问题&#xff0c; ExcelVBA取序号与合计之间的数据 数据如下: 分析一下&#xff0c;问题关键&#xff1a; 问题&#xff1a;1.我要在“序号”两字后面开始取数&#xff0c;因为序号是合并的&#xff0c;所以。。。2.我要取合计前面的数据&#xff0c;所以要…

WebRTC 的核心:RTCPeerConnection

WebRTC 的核心&#xff1a;RTCPeerConnection WebRTC 的核心&#xff1a;RTCPeerConnection创建 RTCPeerConnection 对象RTCPeerConnection 与本地音视频数据绑定媒体协商ICE什么是 Candidate&#xff1f;收集 Candidate交换 Candidate尝试连接 SDP 与 Candidate 消息的互换远端…

【JavaSE】/*初识Java*/

目录 一、了解 Java 语言 二、Java 语言的重要性 2.1 使用程度 2.2 工作领域 三、Java 语言的特性 四、Java 的基础语法 五、可能遇到的错误 六、第一个 java 程序代码解析 七、Java 注释 八、Java 标识符 九、Java 关键字 一、了解 Java 语言 Java 是由 Sun Micr…

攻防世界(CTF)~web-supersqli(详细解题思路)

题目介绍 题目描述“随便注” 先看一下是否存在注入 判断闭合方式 输入1’ and 11-- -正常回显 输入1and 12-- -无回显,确认是单引号闭合 看一下列数 输入1 order by 2-- - 有回显 输入1 order by 3-- - 报错&#xff0c;由此判断两列 使用union联合注入发现select被过滤了&a…

【学习AI-相关路程-工具使用-自我学习-Ubuntucudavisco-开发工具尝试-基础样例 (2)】

【学习AI-相关路程-工具使用-自我学习-cuda&visco-开发工具尝试-基础样例 &#xff08;2&#xff09;】 1、前言2、环境说明3、总结说明4、工具安装0、验证cuda1、软件下载2、插件安装 5、软件设置与编程练习1、创建目录2、编译软件进入目录&创建两个文件3、编写配置文…

Java练手项目 个人学习等选题参考

难度系数说明&#xff1a; 难度系数用来说明项目本身进行分析设计的难度 难度系数大于1的项目是非常值得反复学习的&#xff0c;从项目中成长 前言 大家好&#xff0c;我是二哈喇子&#xff0c;此博文整理了各种项目需求 要从本篇文章下的项目中学习的思路&#xff1a; 用的…

2024 年最新使用 ntwork 框架搭建企业微信机器人详细教程

NTWORK 概述 基于 PC 企业微信的 api 接口&#xff0c;支持收发文本、群、名片、图片、文件、视频、链接卡片等。 下载安装 ntwork pip install ntwork国内源安装 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple ntwork企业微信版本下载 官方下载&#xff1a;h…

大模型prompt实例:知识库信息质量校验模块

大模型相关目录 大模型&#xff0c;包括部署微调prompt/Agent应用开发、知识库增强、数据库增强、知识图谱增强、自然语言处理、多模态等大模型应用开发内容 从0起步&#xff0c;扬帆起航。 大模型应用向开发路径&#xff1a;AI代理工作流大模型应用开发实用开源项目汇总大模…