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

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%;
    }

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

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

相关文章

深度学习论文解读:比较ResNet和ViT差异

前言 计算机视觉、机器学习,这两个词会让你想到什么? 相信绝大多数人第一反应都是CNN,而持续关注这些领域发展的人,则会进一步联想到近几年大火的Transformer,它不仅在自然语言相关任务上表现优秀,在图像…

HarmonyOS4.0系列——01、下载、安装、配置环境、搭建页面以及运行示例代码

HarmonyOS4.0应用开发 安装编辑器 这里安装windows版本为例 安装依赖 打开DevEco Studio 这八项全部打钩即可开始编写代码,如果存在x,需要安装正确的库即可 开发 点击Create Project 选择默认模板——next Model部分分为Stage和FA两个应用模型&…

JS:给数字添加千分位符(每3位数用逗号隔开)

背景 如果一串数字的长度太长,就不方便阅读,因此可以采用分隔符对数字进行分割本文的分割规则是: 如果数字的长度大于等于5则进行分割,每3位数用逗号分割开 解决 数字可以分为:number类型的数字和字符串类型的数字&…

作为电子信息工程的学生,学完stm32后,是应该学fpga还是Linux?

作为电子信息工程的学生,学完stm32后,是应该学fpga还是Linux? 我自己也是电子信息工程专业出身,FPGA和Linux都是我们大三的专业课,都学过基础也做了基础 的项目,我自己的选择是Linux。最近很多小伙伴找我&#xff0c…

汽车制造领域中的3D测量仪,您了解多少?

在汽车制造领域中,3D测量仪可以满足各种不同的测量需求,被广泛应用于各种零部件和整车的测量、检测及质量控制,为汽车制造的质量控制和精度提高提供了重要的保障。 在汽车设计阶段,3D测量仪可以精确测量车身、引擎盖、车门等零部…

主播个人风格定位

—、外观风格 主播的外观风格是给观众的第一印象,它决定了主播在观众心中的形象和定位。以下是一些常见的外观风格类型: 1.时尚型:主播穿着时尚、前卫,通常以潮流、新颖的形象出现在观众面前。 2.清新自然型:主播穿着简单、舒适,给人一种自…

亚马逊卖家售后管理做得好,差评投诉不见了!一文分享售后管理技巧

对于亚马逊卖家而言,把产品卖出去之后并非一劳永逸,往往都会涉及到售后服务,即使卖家发出了货物且收到了付款,买家也可能申请售后退货退款。售后服务是亚马逊卖家成功的关键之一,这不仅仅影响着买家的购买体验&#xf…

如何找到自己的兴趣和擅长,并以此为职业?

说起热爱,擅长,兴趣,职业这些词,我是一贯的主张:人活着不容易,干点自己喜欢的不香吗。 但是.....一定要注意这个但是...... 什么是兴趣? 三分钟热度算不算?不能养家糊口的算不算&…

2024年全网最全的Jmeter教程:jmeter_BeanShell脚本通过BeanShell进行加解密方法

BeanShell脚本 BeanShell简介: BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些 语法和方法; BeanShell是一种松散类型的脚本语言; BeanShell是用Java写成的,一个小型的、免费的、可以下载、嵌入式的 Ja…

信息机房监控系统(动环辅助监控系统)

信息机房监控系统是一个综合性的系统,用于对机房的所有设备及其环境进行集中监控和管理。这种系统主要针对机房的各个子系统进行监控,包括动力系统、环境系统、消防系统、保安系统、网络系统等。 依托电易云-智慧电力物联网,以下是信息机房监…

外卖小程序系统:数字化时代餐饮业的技术奇迹

在当今数字化时代,外卖小程序系统正以其强大的技术背后支持,成为餐饮业务的一项奇迹。这个系统不仅提供了便捷的点餐体验,更通过先进的技术手段,实现了高效订单处理、智能推荐以及实时配送追踪。下面,我们将深入探讨外…

Java 开源重试类 guava-retrying 使用案例

使用背景 需要重复尝试执行某些动作&#xff0c;guava-retrying 提供了成型的重试框架 依赖 <dependency><groupId>com.github.rholder</groupId><artifactId>guava-retrying</artifactId><version>${retrying.version}</version>…

如何在Linux以docker-compose方式快速部署运行StackEdit,并实现公网访问

文章目录 1. docker部署Stackedit2. 本地访问3. Linux 安装cpolar4. 配置Stackedit公网访问地址5. 公网远程访问Stackedit6. 固定Stackedit公网地址 StackEdit是一个受欢迎的Markdown编辑器&#xff0c;在GitHub上拥有20.7k Star&#xff01;&#xff0c;它支持将Markdown笔记保…

考情实况系列:把控考场节奏,从容拿下Datacom HCIE认证

大家好&#xff0c;我是誉天的数通学员&#xff0c;前段时间刚刚通过了HCIE认证考试&#xff0c;这里给大家分享一下我的考试经验与心得&#xff0c;希望对大家有所帮助。 我预约的是11月3日的杭州考场&#xff0c;考试前一天我就到了杭州&#xff0c;在中医药大学地铁站边上的…

C# Onnx DIS高精度图像二类分割

目录 介绍 效果 模型信息 项目 代码 下载 介绍 github地址&#xff1a;https://github.com/xuebinqin/DIS This is the repo for our new project Highly Accurate Dichotomous Image Segmentation 对应的paper是ECCV2022的一篇文章《Highly Accurate Dichotomous Imag…

5.1异常处理

5.1异常处理 1. 什么是异常2. 异常分类2.1 Error2.2 Exception 3. 异常处理3.1 try-catch-finally终止finally执行的方法return关键字在异常处理的作用 1. 什么是异常 2. 异常分类 2.1 Error 2.2 Exception 2.2.1 非检查异常 2.2.2 检查异常 3. 异常处理 3.1 try-catch-fina…

位实现加减乘除专题

位实现加减乘除专题 在计算机中&#xff0c;位运算的效率比加减乘数效率更高&#xff0c;因此在高性能软件的源码中大量应用&#xff0c;而且计算机里各种运算本质上都是位运算。本专题我们就研究几个相关问题。 两整数之和 题目 : LeetCode 371.两整数之和 : 371. 两整数…

计算一个6人的队形问题

有6个人在操场上排队 3a2 0 1 0 3a3 0 0 1 0 1 0 0 1 0 0 1 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 有3个人希望队形有3a2的结构&#xff0c;另外还有3个人希望队形有3a3的结构&#xff0c;现在让这6个人排成一个队&#xff0c;最终的队形是什么&a…

无菌药品生产(A级区域)--气流流型测试可视化烟雾试验详细介绍

技术背景 无菌药品是指法定药品标准中列有无菌检测项目的制剂和原料药&#xff0c;包括注射剂、眼用制剂、无菌软膏剂、无菌混悬剂等。目前工程中&#xff0c;以注射剂产品为主的厂房占据了很大的比重。 无菌药品生产质量风险管理中&#xff0c;人员及其活动被视为重大的污染…

智能配电箱柜管理系统

智能配电箱柜管理系统是一个综合性的管理系统&#xff0c;专门设计用于监控和控制智能配电箱和柜的运行。这个系统集成了先进的技术和智能化功能&#xff0c;以确保配电系统的正常运行并提高其效率。依托电易云-智慧电力物联网&#xff0c;以下是智能配电箱柜管理系统的主要特点…