vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法

1、先上个截图:

说明:拖动上面的分隔栏就可以实现,改变左右区域的大小。

2、上面的例子来自官网的:

Container 布局容器 | Element Plus

3、拖动的效果来自:

https://juejin.cn/post/7029640316999172104#heading-1

4、我们将二个效果,进行了组合,代码:

<template><el-container class="box" style="height: 100vh"><el-aside width="200px" class="left"><el-scrollbar><el-menu :default-openeds="['1', '3']"><el-sub-menu index="1"><template #title><el-icon><message /></el-icon>Navigator One</template><el-menu-item-group><template #title>Group 1</template><el-menu-item index="1-1">Option 1</el-menu-item><el-menu-item index="1-2">Option 2</el-menu-item></el-menu-item-group><el-menu-item-group title="Group 2"><el-menu-item index="1-3">Option 3</el-menu-item></el-menu-item-group><el-sub-menu index="1-4"><template #title>Option4</template><el-menu-item index="1-4-1">Option 4-1</el-menu-item></el-sub-menu></el-sub-menu><el-sub-menu index="2"><template #title><el-icon><icon-menu /></el-icon>Navigator Two</template><el-menu-item-group><template #title>Group 1</template><el-menu-item index="2-1">Option 1</el-menu-item><el-menu-item index="2-2">Option 2</el-menu-item></el-menu-item-group><el-menu-item-group title="Group 2"><el-menu-item index="2-3">Option 3</el-menu-item></el-menu-item-group><el-sub-menu index="2-4"><template #title>Option 4</template><el-menu-item index="2-4-1">Option 4-1</el-menu-item></el-sub-menu></el-sub-menu><el-sub-menu index="3"><template #title><el-icon><setting /></el-icon>Navigator Three</template><el-menu-item-group><template #title>Group 1</template><el-menu-item index="3-1">Option 1</el-menu-item><el-menu-item index="3-2">Option 2</el-menu-item></el-menu-item-group><el-menu-item-group title="Group 2"><el-menu-item index="3-3">Option 3</el-menu-item></el-menu-item-group><el-sub-menu index="3-4"><template #title>Option 4</template><el-menu-item index="3-4-1">Option 4-1</el-menu-item></el-sub-menu></el-sub-menu></el-menu></el-scrollbar></el-aside><div class="resize"></div><el-container class="mid"><el-header style="text-align: right; font-size: 12px"><div class="toolbar"><el-dropdown><el-icon style="margin-right: 8px; margin-top: 1px"><setting /></el-icon><template #dropdown><el-dropdown-menu><el-dropdown-item>View</el-dropdown-item><el-dropdown-item>Add</el-dropdown-item><el-dropdown-item>Delete</el-dropdown-item></el-dropdown-menu></template></el-dropdown><span>Tom</span></div></el-header><el-main><el-scrollbar><el-table :data="tableData"><el-table-column prop="date" label="Date" width="140" /><el-table-column prop="name" label="Name" width="120" /><el-table-column prop="address" label="Address" /></el-table></el-scrollbar></el-main></el-container></el-container>
</template><script lang="ts" setup>
import { onMounted, onUnmounted, ref } from "vue";
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";const item = {date: "2016-05-02",name: "Tom",address: "No. 189, Grove St, Los Angeles",
};
const tableData = ref(Array.from({ length: 20 }).fill(item));function dragControllerDiv() {var resize = document.getElementsByClassName("resize");var left = document.getElementsByClassName("left");var mid = document.getElementsByClassName("mid");var box = document.getElementsByClassName("box");for (let i = 0; i < resize.length; i++) {// 鼠标按下事件resize[i].onmousedown = function (e) {//颜色改变提醒resize[i].style.background = "#818181";var startX = e.clientX;resize[i].left = resize[i].offsetLeft;// 鼠标拖动事件document.onmousemove = function (e) {var endX = e.clientX;var moveLen = resize[i].left + (endX - startX); // (endx-startx)=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度if (moveLen < 32) moveLen = 32; // 左边区域的最小宽度为32pxif (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150pxresize[i].style.left = moveLen; // 设置左侧区域的宽度for (let j = 0; j < left.length; j++) {left[j].style.width = moveLen + "px";mid[j].style.width = box[i].clientWidth - moveLen - 10 + "px";}};// 鼠标松开事件document.onmouseup = function (evt) {//颜色恢复resize[i].style.background = "#d6d6d6";document.onmousemove = null;document.onmouseup = null;resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉};resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获return false;};}
}onMounted(() => {dragControllerDiv();
});
</script><style scoped>
.layout-container-demo .el-header {position: relative;background-color: var(--el-color-primary-light-7);color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {color: var(--el-text-color-primary);background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {border-right: none;
}
.layout-container-demo .el-main {padding: 0;
}
.layout-container-demo .toolbar {display: inline-flex;align-items: center;justify-content: center;height: 100%;right: 20px;
}/* 拖拽相关样式 */
/*包围div样式*/
.box {width: 100%;height: 100%;margin: 1% 0px;overflow: hidden;box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
}
/*左侧div样式*/
.left {width: calc(32% - 10px); /*左侧初始化宽度*/height: 100%;background: #ffffff;float: left;
}
/*拖拽区div样式*/
.resize {cursor: col-resize;float: left;position: relative;top: 45%;background-color: #d6d6d6;border-radius: 5px;margin-top: -10px;width: 10px;height: 50px;background-size: cover;background-position: center;/*z-index: 99999;*/font-size: 32px;color: white;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {color: #444444;
}
/*右侧div'样式*/
.mid {float: left;width: 68%; /*右侧初始化宽度*/height: 100%;background: #fff;box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
}
</style>

5、通过上面的代码,我们可以很轻松的实现拖动改变左右二侧区域的大小,说明:

document.getElementsByClassName:返回一个类似数组的对象,包含了所有指定 class 名称的子元素。比如document.getElementsByClassName("left"); 是查找class="left"的所有的elements。

document.onmousemove = function (e) {
        var endX = e.clientX;
        var moveLen = resize[i].left + (endX - startX); // (endx-startx)=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
        var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

        if (moveLen < 32) moveLen = 32; // 左边区域的最小宽度为32px
        if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px

        resize[i].style.left = moveLen; // 设置左侧区域的宽度

        for (let j = 0; j < left.length; j++) {
          left[j].style.width = moveLen + "px";
          mid[j].style.width = box[i].clientWidth - moveLen - 10 + "px";
        }
      };

这里的left[j],mid[j], length=1的时候,就是第一个元素,也就是我们左侧导航与右侧数据。

容器宽度 = 左边区域的宽度 + resize的宽度 + 右边区域的宽度

resize[0]的left就是左侧的宽度。

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

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

相关文章

Excel 无法打开文件

Excel 无法打开文件 ‘新建 Microsoft Excel 工作表.xlsx",因为 文件格式或文件扩展名无效。请确定文件未损坏&#xff0c;并且文件扩展名与文件的格式匹配。

K8S node节点没有相应的pod镜像运行故障处理办法

查看从节点状态 kubectl describe node k8s-node1以下是报错提示 解决办法 需要处理node1节点上的磁盘空间&#xff0c;磁盘空间需要在85%内 处理后的状态 处理正常

使用代理时Stable Diffusion无法正常下载各类模型的解决办法

最近发现了 Stable Diffusion 这个好玩的ai绘画工具&#xff0c;不得不感叹现在ai工具已经进化到这么简单易用的程度&#xff0c;只要下载对应的模型就可以生成各种有意思的图片 就算你没有编程基础&#xff0c;跟着教程也能弄出来 不过使用过程中发现部分功能无法使用 查看日…

GODOT 4 不用scons编译cpp扩展的方法

以terrain3d插件&#xff0c;Godot_v4.3 为例&#xff1a; 下载下来&#xff0c;先用scons编译一遍通过后&#xff0c;整个占用1GB&#xff0c;obj文件都生成在源码旁边&#xff0c;够乱。 scons 是跨平台的构建工具&#xff0c;但是需要需要写python脚本。流程比较莫名其妙…

Python 学习完基础语法知识后,如何进一步提高?

入门Python后&#xff0c;就可以拿些小案例练手了&#xff0c;这时候千万不要傻乎乎地成天啃语法书。 编程是一门实践的手艺&#xff0c;讲究孰能生巧。不管是去手撸算法、或者照葫芦画瓢写几个小游戏都可以让你的Python突飞猛进。 之前看github比较多&#xff0c;推荐给大家…

基于Java的简单图书管理系统的实现(增删改查)

基于Java的简单图书管理系统的实现&#xff08;增删改查&#xff09; package com.situ.lib;public class Book {//对象&#xff1a;书-----定义书的属性:private String name;private String isbn;private String author;private double price;//无参构造方法&#xff1a;pub…

C语言必做30道练习题

C语言练习30题&#xff08;分支循环&#xff0c;数组&#xff0c;函数&#xff0c;递归&#xff0c;操作符&#xff09; 目录 分支循环1.闰年的判断2.阅读代码&#xff0c;计算代码输出的结果3.输入一个1~7的数字&#xff0c;打印对应的星期几4.输入任意一个整数值&#xff0c;…

tp接口 入口文件 500 错误原因

一、描述 二、可能的原因 1、runtime目录没权限 2、关闭了Tp记录日志的功能 3、关闭debug调试模式 4、关闭了debug模式还是报错 一、描述 Thinkphp项目本地正常&#xff0c;上传到线上后静态文件访问正常&#xff0c;访问tp接口报500错误。 经调试发现&#xff0c;在php入…

思源笔记轻松连接本地Ollama大语言模型,开启AI写作新体验!

文章目录 前言1. 下载运行Ollama框架2. Ollama下载大语言模型3. 思源笔记设置连接Ollama4. 测试笔记智能辅助写作5. 安装Cpolar工具6. 配置Ollama公网地址7. 笔记设置远程连接Ollama8. 固定Ollama公网地址 前言 今天我们要聊聊如何通过cpolar内网穿透技术&#xff0c;把国产笔…

CAS 详解

Java 中 CAS 是如何实现的&#xff1f; 在 Java 中&#xff0c;实现 CAS&#xff08;Compare-And-Swap, 比较并交换&#xff09;操作的一个关键类是Unsafe。 Unsafe类位于sun.misc包下&#xff0c;是一个提供低级别、不安全操作的类。由于其强大的功能和潜在的危险性&#xf…

九识智能与徐工汽车达成战略合作,共绘商用车未来新蓝图

近日&#xff0c;九识智能与徐工汽车签署战略合作协议&#xff0c;标志着双方在智能驾驶技术与新能源商用车融合应用、联合生产及市场推广等方面迈入深度合作的新篇章&#xff0c;将共同引领智能驾驶技术商业化浪潮。 近年来&#xff0c;在国家智能化发展战略的引领下&#xff…

【vue2.7.16系列】手把手教你搭建后台系统__登录使用状态管理(15)

使用store进行登录信息管理 其实就是把登录放到vuex的actions中去执行&#xff0c;然后保存用户信息、权限等 在store/modules/account.js中添加如下代码&#xff1a; import { login, logout, getInfo, menusApi } from /api/account; // getExpiresTime import {getToken,s…

sql报错信息将字符串转换为 uniqueidentifier 时失败

报错信息&#xff1a; [42000] [Microsoft][SQL Server Native Client 10.0][SQL Server]将字符串转换为 uniqueidentifier 时失败 出错行如下&#xff1a; 表A.SourceCode 表B.ID 出错原因&#xff1a; SourceCode是nvarchar,但ID是uniqueidentifier 数据库查询字段和类…

「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用

在鸿蒙应用中&#xff0c;Canvas 组件可以实现丰富的动态效果&#xff0c;适合用于动画和实时更新的场景。本篇将介绍如何在 Canvas 中实现动画循环、动态进度条、旋转和缩放动画&#xff0c;以及性能优化策略。 关键词 Canvas 组件动态绘制动画效果动态进度条旋转和缩放性能优…

Python练习10

Python日常练习 题目&#xff1a; 编写程序&#xff0c;输出如下所示图案。 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 要求&#xff1a; 使用for循环的方式完成 --------------------------------------------------------- 注意&#xff1a; …

【前端】html的8个常用标签

HTML html 超文本链接(标记)语言 H5 HTML v5 get/post/delete/put —— restful 网络规划 Web开发 结构样式动作 架构 装饰 交互&#xff08;动作&#xff09; 装饰做好了–> UI工程师 标签 文本相关 图片、图像、声音 导航 表格* 列表 表单标签* 布局标签 H5…

Java高效学习家教平台系统小程序源码

&#x1f4da; 家教平台系统&#xff1a;让孩子学习更高效的秘密武器 &#x1f680; &#x1f469;‍&#x1f3eb; 引言&#xff1a;家教新风尚&#xff0c;线上平台引领教育潮流 在这个信息爆炸的时代&#xff0c;家教平台系统如同雨后春笋般涌现&#xff0c;为孩子们的学习…

Qt多边形填充/不填充绘制

1 填充多边形绘制形式 void GraphicsPolygonItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) {Q_UNUSED(option);Q_UNUSED(widget);//painter->setPen(pen()); // 设置默认画笔//painter->setBrush(brush()); // 设置默…

OpenAI大事记;GPT到ChatGPT参数量进化

目录 OpenAI大事记 GPT到ChatGPT参数量进化 OpenAI大事记 GPT到ChatGPT参数量进化 ChatGPT是从初代 GPT逐渐演变而来的。在进化的过程中,GPT系列模型的参数数量呈指数级增长,从初代GPT的1.17亿个参数,到GPT-2的15 亿个参数,再到 GPT-3的1750 亿个参数。模型越来越大,训练…

一文了解Java序列化

Java 序列化&#xff08;Serialization&#xff09;是将对象的状态转换为字节流&#xff0c;以便将对象的状态保存到文件中或通过网络传输的过程。反序列化&#xff08;Deserialization&#xff09;则是将字节流恢复为原始对象。Java 序列化主要通过 Serializable 接口实现。 为…