【Vue】可拖拽侧边栏实现

 在本篇博客中,我们将探讨如何在 Vue.js 项目中实现一个可拖拽的侧边栏。此功能可以通过修改 HTML 和 Vue 组件的脚本来实现。

 首先,我们需要在 HTML 文件中定义侧边栏的容器和用于拖拽的元素。在 Vue 组件中,我们将使用 Vue 的响应式系统来追踪侧边栏的宽度,并添加事件处理程序来响应鼠标拖拽事件。

效果如下:
请添加图片描述

以下是实现拖拽侧边栏的步骤和代码:

  1. 定义侧边栏容器和拖拽元素
    在 HTML 文件中,我们需要一个包含侧边栏内容的容器和一个可以拖拽的元素。

    <template><div class="app-container"><div class="app-card"><el-container style="height: 100%"><el-header>标题</el-header><el-container><el-aside:width="widthData + 'px'"style="overflow: auto; min-width: 150px; max-width: 600px"><divstyle="overflow: auto; height: 100%; width: 100%; display: flex"><el-tree:data="treeData":props="defaultProps":expand-on-click-node="false"default-expand-all:disabled="true"@node-click="handleNodeClick"/></div></el-aside><divid="asideBar"style="height: 100%;width: 7px;padding: 0 3px;cursor: col-resize;display: flex;"><div:class="barClass"style="height: 100%;width: 1px;border-radius: 1px;"></div></div><el-main style="min-width: 300px"><div>内容</div></el-main></el-container></el-container></div></div>
    </template>
    
  2. 添加 Vue 组件的脚本
    在 Vue 组件的脚本部分,我们将使用 Vue 的响应式系统来追踪侧边栏的宽度,并添加事件处理程序来响应鼠标拖拽事件。

    <script lang="ts" setup>
    // ... 省略其他代码 ...
    const barClass = ref("normal"); // 正常样式
    const updateWidth = () => {let resize = document.getElementById("asideBar");if (!resize) {return;}resize.onmousedown = function (e) {if (e.button != 0) {return;}barClass.value = "pressed"; // 按下时的样式let startX = e.clientX;document.onmousemove = function (e) {let endX = e.clientX;let moveLen = endX - startX;startX = endX;widthData.value+= moveLen;if (widthData.value < 150) {widthData.value= 150;}if (widthData.value> 600) {widthData.value= 600;}};document.onmouseup = function () {barClass.value = "normal";  // 恢复正常样式document.onmousemove = null;document.onmouseup = null;};return false;};
    };
    // ... 省略其他代码 ...</script>
    

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

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

相关文章

Android JNI开发定义全局变量

要在 C 文件中设置一个 string 类型的全局变量&#xff0c;让其他 C 文件都可以访问&#xff0c;并且可以通过 JNI 方法修改这个变量&#xff0c;可以按照以下步骤进行操作 定义全局变量&#xff1a; 在一个头文件&#xff08;比如 common.h&#xff09;中定义一个全局的 strin…

力扣73. 矩阵置零

Problem: 73. 矩阵置零 文章目录 题目描述思路复杂度Code 题目描述 思路 思路1&#xff1a;利用一个等大的矩阵判定 复制一个与原始矩阵一样大的矩阵temp&#xff0c;遍历temp时若temp[i][j] 0&#xff0c;则将martix对应的行与列均设置为0 思路2&#xff1a;利用两个一维矩阵…

【Linux】UnixBench介绍、分数调优思路以及测试2D3D的方法

一.简介 unixbench是一个用于测试unix系统性能的工具&#xff0c;也是一个比较通用的benchmark&#xff0c; 此测试的目的是对类Unix 系统提供一个基本的性能指示&#xff0c;很多测试用于系统性能的不同方面&#xff0c;这些测试的结果是一个指数值&#xff08;index value&am…

幻兽帕鲁服务器价格表_阿里云/腾讯云/京东云/华为云报价大全

2024年全网最全的幻兽帕鲁服务器租用价格表&#xff0c;阿里云幻兽帕鲁游戏服务器26元1个月、腾讯云32元一个月、京东云26元一个月、华为云24元1个月&#xff0c;阿腾云atengyun.com整理最新幻兽帕鲁专用4核16G、8核16G、8核32G游戏服务器租用价格表大全&#xff1a; 阿里云幻…

openGauss Anomaly_detection_数据库指标采集_预测与异常监控

Anomaly-detection&#xff1a;数据库指标采集、预测与异常监控 可获得性 本特性自openGauss1.1.0版本开始引入。 特性简介 anomaly_detection是openGauss集成的、可以用于数据库指标采集、预测以及异常监控与诊断的AI工具&#xff0c;是dbmind套间中的一个组件。支持采集的…

C++类的六个默认成员函数(详细解析与总结)

目录 前言&#xff1a; 一、构造函数 a.特点 b.注意事项 1.首先明确什么是默认构造函数 2.默认构造函数对内置类型与自定义类型的处理 c.总结 二、析构函数 a.特点 b.注意事项 1.什么时候写析构函数&#xff1f; 2.析构函数对内置类型与自定义类型的处理 c.总结 …

pythonselenium自动化测试实战项目

说明&#xff1a;本项目采用流程控制思想&#xff0c;未引用unittest&pytest等单元测试框架 一.项目介绍 目的 测试某官方网站登录功能模块可以正常使用 用例 1.输入格式正确的用户名和正确的密码&#xff0c;验证是否登录成功&#xff1b; 2.输入格式正确的用户名和不…

【面试经典 | 150】单词拆分

文章目录 Tag题目来源解题思路方法一&#xff1a;动态规划 写在最后 Tag 【动态规划】【字符串】 题目来源 139. 单词拆分 解题思路 方法一&#xff1a;动态规划 定义状态 定义 dp[i] 表示字符串 s 前 i 个字符组成的字符串&#xff08;s[0, ..., i-1]&#xff09;是否能被…

【Node.js】模块化

概述 Nodejs 模块化规范遵循两套规范&#xff1a; Common JSES Module Common JS 引入模块&#xff08;require&#xff09;支持四种格式 支持引入内置模块例如 http os fs child_process 等const fs require(fs)&#xff0c;高版本也可以使用const fs require(node:fs…

【Java SE】封装

&#x1f970;&#x1f970;&#x1f970;来都来了&#xff0c;不妨点个关注叭&#xff01; &#x1f449;博客主页&#xff1a;欢迎各位大佬!&#x1f448; 文章目录 1. 封装1.1 封装是什么1.2 封装的意义1.3 访问修饰限定符1.3.1 在Java中如何实现封装1.3.2 各种访问修饰限定…

C语言基础:数据类型

数据类型 C 语言的每一种数据&#xff0c;都是有类型&#xff08;type&#xff09;的&#xff0c;编译器必须知道数据的类型&#xff0c;才能操作数据。一旦知道某个值的数据类型&#xff0c;就能知道该值的特征和操作方式。 基本数据类型有三种&#xff1a;字符&#xff08;c…

C语言学习笔记day16

1. 可变参函数 在 C 语言中&#xff0c;可变参数函数是指能够接受不定数量参数的函数。常见的可变参数函数格式是使用 <stdarg.h> 头文件中的宏和函数来实现&#xff0c;其中最常用的是 va_list、va_start、va_arg 和 va_end 函数调用时,传入参数个数是不确定的,需要将函…

SpringCloud微服务集成Dubbo

1、Dubbo介绍 Apache Dubbo 是一款易用、高性能的 WEB 和 RPC 框架,同时为构建企业级微服务提供服务发现、流量治理、可观测、认证鉴权等能力、工具与最佳实践。用于解决微服务架构下的服务治理与通信问题,官方提供了 Java、Golang 等多语言 SDK 实现。使用 Dubbo 开发的微服…

【二叉树】Leetcode 230. 二叉搜索树中第K小的元素【中等】

二叉搜索树中第K小的元素 给定一个二叉搜索树的根节点 root &#xff0c;和一个整数 k &#xff0c;请你设计一个算法查找其中第 k 个最小元素&#xff08;从 1 开始计数&#xff09;。 示例1&#xff1a; 输入&#xff1a;root [3,1,4,null,2], k 1 输出&#xff1a;1 解…

在 fstab文件中配置 UUID方式自动挂载数据盘、swap、目录(**)

linux如何挂在硬盘&#xff0c;自动挂载和手动挂载&#xff08;详细说明&#xff09;https://gitcode.csdn.net/65eedcea1a836825ed7a06f4.html 解决linux重启后磁盘挂载失效的问题 https://blog.csdn.net/sugarbliss/article/details/107033034 linux /etc/fstab 文件详细说…

UG NX二次开发(C#)-通过曲线组生成NURBS曲面

文章目录 1、前言2、UG NX中通过曲线组生成NURBS曲面的操作3、采用NXOpen C#方法的源代码1、前言 在UG NX中,曲线、曲面的操作使用比较多,对于创建NURBS曲面,可以通过曲线组来生成,本文以NXOpen C#的方法实现通过曲线组生成NURBS曲面的功能。对于UG NX二次开发感兴趣或者有…

探索多种数据格式:JSON、YAML、XML、CSV等数据格式详解与比较

title: 探索多种数据格式&#xff1a;JSON、YAML、XML、CSV等数据格式详解与比较 date: 2024/3/28 17:34:03 updated: 2024/3/28 17:34:03 tags: 数据格式JSONYAMLXMLCSV数据交换格式比较 1. 数据格式介绍 数据格式是用于组织和存储数据的规范化结构&#xff0c;不同的数据格…

【aws】架构图工具推荐

碎碎念 以前以为日本冰箱论是个梗&#xff0c;结果居然是真的。用光盘传真其实还能理解&#xff08;毕竟我也喜欢电子古董2333&#xff09;&#xff0c;但是画架构图居然用的是excel&#xff0b;截图&#xff01;啊苍天呐&#xff0c;然后看到隔壁工位用excel画web原型又感觉释…

将数字城市复制到虚拟空间,如何搭建实景三维虚拟场景?

什么是实景三维&#xff1f; 实景三维&#xff08;3D Real Scene&#xff09;是一个专业术语&#xff0c;它指的是对一定范围内人类生产、生活和生态空间进行真实、立体、时序化反映和表达的数字虚拟空间。它是新型基础测绘的标准化产品&#xff0c;也是国家重要的新型基础设施…

android apk混淆

android apk混淆是什么? Android APK 混淆是指对 Android 应用程序的代码进行混淆处理&#xff0c;以增强代码的安全性和减小应用程序体积。在 Android 开发中&#xff0c;通常使用 ProGuard 或 R8 这样的工具来执行混淆操作。 混淆过程通过重命名类、方法和变量名称&#x…