vue3 - ant design vue 抽屉弹框组件 a-drawer 拖曳侧边修改宽度功能，让Drawer抽屉框可以拖拽边缘动态修改宽度效果，vue3+antd3如何让抽屉组件变成可拖动百分比宽

已于 2024-09-12 15:52:03 修改
阅读量2.5k 收藏 3
点赞数 7
分类专栏： 前端组件与功能(开箱即用) 文章标签： vue3.js antd3 ant-design-vue a-drawer抽屉弹框 抽屉弹框实现拖曳边缘修改宽度 鼠标按住一个图标或按钮进行拖拽 vue3 antd抽屉拖动
于 2024-07-25 16:18:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/140691094
版权

效果图

在vue3+ant-design-vue项目开发中，详解将a-drawer抽屉组件修改为 “按住弹框侧边线后，用鼠标拖曳实时改变整体宽度” 功能，vue3 antd3如何把drawer抽屉框改成可拖动，用户可以自由通过拖曳改变弹框内的宽度，内容会随着弹框宽度自适应，另外支持将 “拖拽点(按住哪里可以拖动)” 放到任何地方(例如加一个小图标、左侧边框、右侧边框等)，让其可随意左右拖动改变宽度的改造教程，提供详细示例代码。

提供详细示例代码，新手小白复制稍微改改就能用了。

在这里插入图片描述

实现思路

先来看一下，

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
Vue3 - Element Plus 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王佳斌
03-20 3341
vue3，element-plus，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，deep失效了怎么办，当设置append-to-body=true时如何覆盖组件样式，改不了弹框样式，elementPlus弹窗Dialog添加append-to-body后修改原样式无效，如何解决使用append-t后覆盖修改样式不生效，嵌套的append-to-body属性导致内层弹框样式设置不上，append-to-body后更改d
Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王佳斌
03-20 3259
vue2，element-ui，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，在element ui组件库中，使用el-drawer抽屉弹框组件，当设置append-to-body属性后，无法使用deep进行样式覆盖怎么办，关于vue+element中el-dialog设置append-to-body样式不生效问题，vue2 elementUI el-dialog修改了body样式不生效问题解决方案，element组件
antd vue实现菜单拖动展开关闭
yjiangyun的博客
02-01 632
antd vue菜单拖动，点击按钮实现展开关闭，拖动菜单右侧实现菜单展开和缩回。
React 自定义 Antd 中 Drawer 组件实现鼠标拖拽控制长度（上下伸缩）
m0_59564117的博客
07-03 637
【代码】React 自定义 Antd 中 Drawer 组件实现鼠标拖拽控制长度（上下伸缩）
antd Drawer 实现宽度拖拽
weixin_45954775的博客
11-20 461
【代码】antd Drawer 实现宽度拖拽。
vue3:ant的a-drawer：placement设置为bottom，如何自定义设置动态宽度？指定 Drawer 挂载的节点？
weixin_42304966的博客
04-19 519
子组件：placement设置为bottom，左右菜单宽度220px,margin-right：10px；声明动态变量wayWidth，利用css动态属性计算宽度calc(100% - 230px)，我需要以右侧为基准：right: 0，get-container挂在指定的父容器具体层级继承宽高。父组件：点击运单数，弹窗展开，在section标注节点。
ant-design-vue a-drawer
weixin_45124380的博客
01-11 2594
handle 设置后抽屉直接挂载到 DOM 上，你可以通过该 handle 控制抽屉打开关闭 VNode | slot condition 1.自定义组件放在a-drawer中,子组件mounted无法获取值,使用watch来获取value会发现第一次打开抽屉获取不到,第二次开始才可以正常获取 solve a-drawer中加入:handle=“true” 把drawer直接挂载在dom上 子组件可以通过watch正常获取 ...
antd中＜a-drawer＞抽屉宽度自适应
weixin_64978272的博客
07-21 1160
'修改' : '新建'"
二次封装ant-design-vue3的drawer组件
maxlee111的博客
07-02 1705
二次封装ant-design-vue3的drawer组件
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...
VUE组件中的 Drawer 抽屉实现代码
10-16
Vue组件中的Drawer抽屉是一种常见的交互组件，它允许开发者在页面上实现一种侧边滑出的交互效果，类似于抽屉的打开与关闭。通过使用Vue.js框架，开发者可以通过自定义组件的方式实现Drawer抽屉效果。在实现过程中，...
对 Ant-design 的 Drawer 组件 增加拖拽效果
最新发布
chenyajundd的博客
07-23 1197
实现这个需求首先确定按下元素的位置，为按下元素添加相应事件，根据移动的距离动态赋值内容容器的宽度，再根据Drawer的width：auto，自动撑开Drawer组件即可。当然实现过程中也有其他小 bug，比如选中文字，设置最小宽度等等，其实还有小问题，文章中并没有呈现，就是如果里面的内容时 iframe 引入的话，会导致移动事件失效，这个会单独写一篇文章，主要方便有相同问题的朋友进行搜索解决问题。
手动拖拽改变DIV宽度，分栏
weixin_41463944的博客
07-22 583
<!-- * @Author: your name * @Date: 2021-07-22 11:01:08 * @LastEditTime: 2021-07-22 15:09:20 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \internetPlatform\src\views\zhangming\systemManage\test2.vue --&g
Vue3抽屉（Drawer）
Mr Dear的博客
06-26 1081
抽屉从父窗体边缘滑入，覆盖住部分父窗体内容，支持：自定义抽屉弹出位置；添加额外操作；自定义抽屉页脚；自定义 header & body 样式；总之，功能丰富，简单易用😁😁
React自定义Antd抽屉Drawer组件实现鼠标拖拽控制宽度
斑码斑码
04-01 4480
React自定义Antd抽屉Drawer组件实现鼠标拖拽控制宽度
vue自定义抽屉组件
chi1130的博客
08-08 3958
前说 在项目开发中，有很多时候由于某某原因，很多UI组件不能被用，像移动端一个小的H5页面，引入一个大的antd-mobile显然也不合理，所以就有了很多形形色色的自定义组件了。 效果 LIVE demo 代码 drawer.vue <template> <div class="drawer"> <div :class="maskClass" @clic...
使用Vue3 + ElementPlus，让抽屉（el-drawer）显示在对话框（el-dialog）中
qq_48651377的博客
05-11 1483
定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。解决办法：将抽屉的遮罩定位到对话框上，即。属性自定义遮罩的css样式，
vue2.0拖拽滑动抽屉实现
qq_39302236的博客
07-23 329
【代码】vue2.0拖拽滑动抽屉实现。
vue拖拽自由调节元素宽度
Sunny_boy
05-31 622
为拖拽后元素的最小宽度。
ant-design-vue 子组件用a-drawer在点击遮罩层无法关闭
07-14
对于使用 ant-design-vue 中的 a-drawer 组件，点击遮罩层无法关闭的问题，可能是因为没有正确绑定事件或者事件处理函数的原因。以下是一些可能的解决方案： 1. 确保在 a-drawer 组件中设置了 visible 属性，并将其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值