【Vue】Vue3 超简单拖拽条动态修改容器宽度

news2024/11/14 12:10:45

demo

在这里插入图片描述

代码

在这里插入图片描述

const leftBoxWidth = ref(200); // 默认宽度
const leftResize = (e: MouseEvent) => {
  const startX = e.clientX;
  const startWidth = leftBoxWidth.value;
  const mouseMove = (documentE: MouseEvent) => {
    // 80 是左侧菜单宽度
    leftBoxWidth.value = startWidth + documentE.clientX - startX - 80;
  };
  const mouseUp = () => {
    document.removeEventListener('mousemove', mouseMove);
    document.removeEventListener('mouseup', mouseUp);
  };
  document.addEventListener('mousemove', mouseMove);
  document.addEventListener('mouseup', mouseUp);
};
  .drag-bar {
    width: 10px;
    cursor: col-resize;
    z-index: 999;
    &:hover {
      background-color: $color;
    }
  }
      .drag-bar {
      position: absolute;
      top: 0;
      left: -5px;
      height: 100%;
    }

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

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

相关文章

不懂找伦敦银趋势?3个方法搞定

趋势是我们的朋友,但是这个朋友却很喜欢跟我们开玩笑,如果我们不留意,根本发觉不了它的存在。怎么找到趋势本体并且和它做个好朋友呢?下面我们就来介绍三个方法。 数波段的高点和低点。我们以当前的市场波动价格为轴,向…

快手运营的必备的10个工具

一、引言 快手作为短视频领域的佼佼者,为众多创作者提供了广阔的舞台。要想在快手运营中取得成功,掌握一些必备的工具是必不可少的。本文将为您介绍快手运营的10个必备工具,帮助您提高工作效率,优化内容创作。 二、工具推荐 1. …

现货白银MACD实战分析例子

MACD这个技术指标的全称是平滑异同移动平均线,主要表示经过平滑处理后均线的差异程度,一般用来研判现货白银价格变化的方向、强度和趋势。MT4中的MACD指标,主要是由信号线、(上升/下跌)动能柱、0轴这三部分组成。 MACD…

键盘映射笔记

dumpkeys命令用于显示当前系统中定义的键盘映射表。它可以帮助用户查看和理解系统中的键盘布局和键盘映射规则。 当用户执行dumpkeys命令时,它会读取系统中的键盘映射表文件(通常是/etc/keymaps或/etc/console/boottime.kmap.gz),…

chatglm-6B模型下载

从huggingface上面下载chatglm-6B模型是比较简捷的方式,下面记录一下下载安装过程。 huggingface的官方文档如下: https://huggingface.co/docs/huggingface_hub/v0.14.0.rc1/guides/download 1.配置conda环境 服务器上使用的是miniconda,…

如何在公网环境下使用笔记本的Potplayer访问本地群晖webdav中的影视资源

文章目录 如何在公网环境下使用笔记本的Potplayer访问本地群晖webdav中的影视资源**那么问题来了,potplayer只能局域网内访问资源,那我不在家中怎么看本地电影?** 本教程解决的问题是:按照本教程方法操作后,达到的效果…

什么是域欺骗?域欺骗的主要类型有哪些?

域欺骗是指网络犯罪分子假冒网站名称或电子邮件域来欺骗用户。域欺骗的目的是将恶意电子邮件或网络钓鱼网站伪装成合法电子邮件或网站,诱使用户与之交互。域欺骗就像骗子一样,向人们展示伪造的凭据以获得信任,然后再利用其获得好处。 域欺骗…

【PCB学习】几种接地符号

声明 该图并非原创,原文出处不可考,因此在这里附加说明。 示意图

在vue-cli中快速使用webpack-bundle-analyzer

webpack-bundle-analyzer 是一个可视化资源分析工具,可以直观地分析打包出的文件有哪些,及它们的大小、占比情况、各文件 Gzip压缩后的大小、模块包含关系、依赖项等。 从vue-cli官方的更新记录可以看到,从vue-cli3开始集成report命令 当前环…

IIC总线逻辑

一、 我们习以为常的IIC通常是什么样子? 在我们研发/应用工程师眼中,IIC的形象通常是如图这样的吧?(你们说是不是?) 是的,对于理想的硬件调程序,这个层…

利用JDBC及Servlet实现对信息录入注册功能的实现

利用JDBC及Servlet实现对登录注册功能的实现; 1.题目要求: 1、新建一个数据库名为(个人姓名拼音),表(学生所在城市),字段(sid:学号,sname&#x…

如何通过cpolar内网穿透工具实现远程访问本地postgreSQL

文章目录 前言1. 安装postgreSQL2. 本地连接postgreSQL3. Windows 安装 cpolar4. 配置postgreSQL公网地址5. 公网postgreSQL访问6. 固定连接公网地址7. postgreSQL固定地址连接测试 前言 PostgreSQL是一个功能非常强大的关系型数据库管理系统(RDBMS),下…

vue中使用echarts渐变柱状图 Cannot read properties of undefined (reading ‘graphic‘)解决方法

在使用渐变颜色时报错,Cannot read properties of undefined (reading ‘graphic’) echarts也下载了,引入了,就是报错,用不了new charts, 结果换了一个版本号就可以了,本来用的"echarts": "…

win10家庭版系统远通过一根网线程连接另一台机器

用网线连接两个机器 打开cmd命令行 输入ipconfig,查看 复制 IPv4地址 打开 远程桌面 程序 点击连接 输入在另外一机器设置好的用户名和密码即可

CMMI之项目管理类核心框架

项目管理类过程域涵盖了与项目的计划、监督和控制相关的项目管理活动。 CMMI-DEV 中的七个项目管理类过程域是: • 集成项目管理(Integrated Project Management, IPM) • 项目监督与控制(Project Monitoring and Cont…

【Ant Design合集】自用总结

a-input 1. search 与 pressEnter 的设计区别 search 是与a-input-search绑定一起的,点击按钮和回车触发事件,关联有: enter-button:是否确认按钮(与addon自定义按钮冲突) loading:搜索loadin…

简单好用的轻量级思维导图:ClickCharts 激活for mac

ClickCharts是一款流程图和流程图绘制软件,它提供了直观的界面和丰富的工具,帮助用户轻松创建和编辑各种类型的图表和流程图。 以下是ClickCharts软件的一些主要功能和特点: 流程图绘制:ClickCharts允许用户创建各种类型的流程图…

直流充电桩测试仪的作用

直流充电桩测试仪主要用于对充电桩进行全面的功能测试和性能评估,以确保其正常运行和安全使用。直流充电桩测试仪可以对充电桩的各个功能进行测试,包括连接性测试、通信测试、充电功率测试等。通过测试可以检测充电桩是否正常工作,是否能够正…

【2021集创赛】NI杯三等奖:基于IECUBE-3100的高精度数模转换器设计及自动化测试方案

本作品参与极术社区组织的有奖征集|秀出你的集创赛作品风采,免费电子产品等你拿~活动。 杯赛题目:DAC芯片测试 参赛要求:本科生组 赛题内容: NIC公司最近正在竞争一个8bit DAC芯片设计的订单机会,需要按照甲方需求尽快提交芯片的设…

基于SSM的在线测试管理系统的设计与实现

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:Vue 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目:是 目录…