vue动态修改侧边菜单栏宽度

news2024/10/7 16:22:14

1.添加可修改宽度的dom元素

<div style="background: #f5f7fa;padding: 20px 10px;">
          <label>菜单宽度 </label>
          <el-input v-model="sideWidth" placeholder="请输入宽度值" style="width: 100px"/> px
          <el-button  type="primary" size="small" style="margin: 10px 50px 0px 60px;" @click="sideWidthSave()">保存</el-button>
        </div>

2.在data中定义宽度变量 sideWidth

sideWidth:0,

3.逻辑处理

 /********侧边栏宽度********/
 sideWidthSave(){
   localStorage.setItem('sideWidth',this.sideWidth)
   var sidebarContainer =  document.getElementById("sidebar-container"); // 使用合适的选择器
   var mainContainer =  document.getElementById("main-container");

   sidebarContainer.style.setProperty('--base-sidebar-width', this.sideWidth +'px');
   mainContainer.style.setProperty('--base-sidebar-width', this.sideWidth +'px');
   // console.log('****that.sideWidth***',this.sideWidth)
   // console.log('****`${this.sideWidth}px`***',`${this.sideWidth}`)
   /* location.reload();*/
 },

4.页面加载时,调用存储的宽度值

    created() {   
      /****左侧菜单宽度****/
      let NewSideWidth=localStorage.getItem('sideWidth')
      if(NewSideWidth){
        this.sideWidth = NewSideWidth
        this.$nextTick(function () {
          var sidebarContainer =  document.getElementById("sidebar-container"); // 使用合适的选择器
          var mainContainer =  document.getElementById("main-container");

          sidebarContainer.style.setProperty('--base-sidebar-width', this.sideWidth +'px');
          mainContainer.style.setProperty('--base-sidebar-width', this.sideWidth +'px');
        })
      }
    },

注:–base-sidebar-width 是scss中侧边菜单宽度变量
在这里插入图片描述

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

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

相关文章

2023爱分析·数据智能厂商全景报告|爱分析报告

利用多种数据智能技术实现数据驱动的分析与决策&#xff0c;已经成为当前企业数字化转型最重要的目标之一。随着数据来源日益丰富、数据体量快速增长&#xff0c;企业对数据的依赖和挖掘愈发深入&#xff0c;不仅带来数据应用场景、数据用户角色的复杂和多元&#xff0c;也使得…

TOP100 链表(上)

1.160. 相交链表 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0…

机器学习基础、数学统计学概念、模型基础技术名词及相关代码个人举例

1.机器学习基础 &#xff08;1&#xff09;机器学习概述 机器学习是一种人工智能&#xff08;AI&#xff09;的分支&#xff0c;通过使用统计学和计算机科学的技术&#xff0c;使计算机能够从数据中学习并自动改进性能&#xff0c;而无需进行明确的编程。它涉及构建和训练机器…

助力水下潜行:浮力调节系统仿真

01.建设海洋强国 海洋蕴藏着丰富的资源&#xff0c;二十大报告强调&#xff0c;要“发展海洋经济&#xff0c;保护海洋生态环境&#xff0c;加快建设海洋强国”。建设海洋强国旨在通过科技创新驱动、合理开发利用海洋资源、强化海洋环境保护与生态修复、提升海洋经济质量等多个…

6个在线网页原型工具的推荐选择

即时设计 即时设计可以说为中国设计师提供了很大的帮助。作为最受欢迎的在线网页原型图设计协作工具之一&#xff0c;在线协作是其核心特征。在线协作工作允许整个团队同时编辑文件&#xff0c;并可以随时随地访问。 团队共享组件库&#xff0c;使成员可以自由上传、下载和使用…

Git解决分支合并冲突的问题:分支合并提交出现了不同分支同一个文件的修改的冲突解决

有些时候我们合并分支的时候&#xff0c;会出现冲突&#xff0c;原因就是我们修改了分支A 的第一行代码&#xff0c;我们还修改了主分支上面同一个文件中的第一行代码&#xff08;分支A已经提交过一次&#xff09;&#xff0c;此时我们在次合并的时候就会出现冲突&#xff0c;需…

flowable 设置自定义属性教程

概述 由于工作需要给flowable工作流设计器添加自定义属性&#xff0c;以满足功能实现。所以这篇文章介绍下用flowable 开源的的flowable-ui 前端添加自定义属性&#xff0c;后端解析属性值的例子。 技术栈 序号技术点名称版本1Flowable6.8.0 使用的是flowable6.8.0 版的代码…

简述MinewSemi的GNSS模块引领体育与健康科技革新

体育与健康科技领域的创新一直在推动人们更健康、更活跃的生活方式。创新微公司的GNSS模块正成为这一变革的关键推动力。本文将深入研究MinewSemi的GNSS模块在体育和健康追踪领域的创新应用&#xff0c;探讨其如何帮助个体更全面地了解和改善自己的身体状态。 1. 个性化运动轨迹…

源码梳理(2)SpringMVC的执行流程及涉及到的相关组件

文章目录 1&#xff0c;Spring MVC核心组件DispatcherServlet1.1 DispatcherServlet的继承关系1.2 DispatcherServlet的doDispatch方法 2&#xff0c;核心组件HandlerMapping&#xff08;处理器映射器&#xff09;3&#xff0c;核心组件HandlerAdapter&#xff08;处理器适配器…

iOS pod sdk开发到发布,记录

本文章记录从开发sdk到发布cocopod的问题和流程,省的每次都忘还得重新查 1:pod lib create (sdk名称) 命令创建 工程结构,然后根据命令行提示进行选择. What platform do you want to use?? [ iOS / macOS ]。~》 iOS What language do you want to use?? [ Swift / Obj…

Jmeter高级使用

文章目录 JMeter之计数器JMeter之集合点JMeter之断言JMeter之动态关联后置处理器&#xff1a;正则表达式提取器 JMeter之分布式测试JMeter之组件执行顺序元件的作用域元件的执行顺序配置元件Http Cookie管理器 多协议接口的性能测试Debug采样器Http请求中文乱码的解决Post参数设…

循环神经网络RNN专题(01/6)

一、说明 RNN用于处理序列数据。在传统的神经网络模型中&#xff0c;是从输入层到隐含层再到输出层&#xff0c;层与层之间是全连接的&#xff0c;每层之间的节点是无连接的。但是这种普通的神经网络对于很多问题却无能无力。例如&#xff0c;你要预测句子的下一个单词是什么&a…

Netty如何解决粘包以及半包问题,以及目前最常用的LengthFieldBasedFrameDecoder

粘包&#xff08;Sticky Packets&#xff09;和半包&#xff08;Half Packets&#xff09; 粘包&#xff08;Sticky Packets&#xff09;和半包&#xff08;Half Packets&#xff09;是在网络通信中常见的两种问题&#xff0c;特别是在基于流的传输协议&#xff08;如TCP&…

基于tidevice实现iOS app自动化使用详解

目录 1、IOS自动化工具概述 2、tidevice工具的原理和使用 2.1、tidevice的原理 2.2、tidevice实现的功能 2.3、tidevice的安装 2.4、tidevice的使用 2.4.1、设备管理 1、查看已连接的设备的列表 2、检测设备连接状态 3、等待设备连接&#xff0c;只要有就连接就结束监…

《区块链简易速速上手小册》第9章:区块链的法律与监管(2024 最新版)

文章目录 9.1 法律框架和挑战9.1.1 基础知识9.1.2 主要案例&#xff1a;加密货币的监管9.1.3 拓展案例 1&#xff1a;跨国数据隐私和合规性9.1.4 拓展案例 2&#xff1a;智能合约的法律挑战 9.2 区块链的合规性问题9.2.1 基础知识9.2.2 主要案例&#xff1a;加密货币交易所的合…

【读点论文】A Survey of Deep Learning Approaches for OCR and Document Understanding

A Survey of Deep Learning Approaches for OCR and Document Understanding Abstract 文档是许多领域(如法律、金融和技术等)中许多业务的核心部分。自动理解发票、合同和简历等文件是有利可图的&#xff0c;开辟了许多新的商业途径。通过深度学习的发展&#xff0c;自然语言…

cesium-场景出图场景截屏导出图片或pdf

cesium把当前的场景截图&#xff0c;下载图片或pdf 安装 npm install canvas2image --save npm i jspdf -S 如果安装的插件Canvas2Image不好用&#xff0c;可自建js Canvas2Image.js /*** covert canvas to image* and save the image file*/ const Canvas2Image (function…

elementUI中分开的时间日期选择组件,控制日期的禁用

<el-date-picker v-model"query.startTime" type"datetime" :picker-options"startPickerOptions" format"yyyy-MM-dd HH时" popper-class"date-picker" placeholder"选择日期时间"></el-date-picker>…

【Mysql】数据库架构学习合集

目录 1. Mysql整体架构1-1. 连接层1-2. 服务层1-3. 存储引擎层1-4. 文件系统层 2. 一条sql语句的执行过程2-1. 数据库连接池的作用2-2. 查询sql的执行过程2-1. 写sql的执行过程 1. Mysql整体架构 客户端&#xff1a; 由各种语言编写的程序&#xff0c;负责与Mysql服务端进行网…

[C#][opencvsharp]opencvsharp sift和surf特征点匹配

SIFT特征和SURF特征比较 SIFT特征基本介绍 SIFT(Scale-Invariant Feature Transform)特征检测关键特征&#xff1a; 建立尺度空间&#xff0c;寻找极值关键点定位&#xff08;寻找关键点准确位置与删除弱边缘&#xff09;关键点方向指定关键点描述子 建立尺度空间&#xff0…