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

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

效果图

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

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

在这里插入图片描述

实现思路

先来看一下，

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 7
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王佳斌
03-20 2664
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组件
vue3:ant的a-drawer：placement设置为bottom，如何自定义设置动态宽度？指定 Drawer 挂载的节点？
weixin_42304966的博客
04-19 381
子组件：placement设置为bottom，左右菜单宽度220px,margin-right：10px；声明动态变量wayWidth，利用css动态属性计算宽度calc(100% - 230px)，我需要以右侧为基准：right: 0，get-container挂在指定的父容器具体层级继承宽高。父组件：点击运单数，弹窗展开，在section标注节点。
ant-design在 vue 抽屉（drawer）里面嵌套弹出框（modal）出现蒙层遮挡弹框问题
MingT 明天你好！的博客
07-26 8772
ant-design在 vue 抽屉（drawer）里面嵌套弹出框（dialog）出现蒙层遮挡弹框问题
二次封装ant-design-vue3的drawer组件
maxlee111的博客
07-02 1562
二次封装ant-design-vue3的drawer组件
ant-design-vue a-drawer
weixin_45124380的博客
01-11 2497
handle 设置后抽屉直接挂载到 DOM 上，你可以通过该 handle 控制抽屉打开关闭 VNode | slot condition 1.自定义组件放在a-drawer中,子组件mounted无法获取值,使用watch来获取value会发现第一次打开抽屉获取不到,第二次开始才可以正常获取 solve a-drawer中加入:handle=“true” 把drawer直接挂载在dom上 子组件可以通过watch正常获取 ...
vue2使用ant design 的drawer组件显示不了抽屉内容与collapse组件需要点击两次才展开的问题
weixin_46687032的博客
05-18 3536
由于ant官方文档用的是ts和vue3写的，所以用vue2可能会有问题实现不了(也有可能是官方文档的问题，这文档真的很难看懂，需要去搜索其他文章才能够实现，这里记录下我的踩坑记录) Drawer 抽屉组件 Ant 官方文档-Drawer组件 原先我是用了第一个例子（基本用法，如下图） 但是，显示不了抽屉内容，按f12发现drawer的内容并不在dom中，最后参考了这篇文章成功显示出来了。主要就是v-model:visible改成:visible；@after-visible-change也没反应，改成.
Vue3抽屉（Drawer）
Mr Dear的博客
06-26 574
抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。
vue el-dialog弹出框自定义指令实现拖拽改变位置-宽度-高度
路虽远行则将至，事虽难做则必成。
10-20 3478
在实际开发中我们经常使用el-dialog弹出框做表单，一般情况都是居中。遮挡到了一部分数据当我们想要查看弹出框下面的数据时，就只能先把弹出框关闭，查看完数据之后在打开弹框我们通过动态样式，和鼠标事件就可以实现。但自己写的在适配性和全面性上还是有所欠缺的这种我们可以直接复制使用，写成全局自定义指令。多的地方使用，并且只做加法1.来到src/创建directive文件夹2.在src/directive/创建dialog文件夹专门用来放关于dialog的代码。
关于Ant design vue插件中drawer组件阴影小bug
lb_888888的博客
02-21 462
bug介绍：在使用过程中，有一个阴影，是在ant-drawer-content-wrapper类层级上，因为需求，要删除这个阴影，可我不管怎么使用deep覆盖，总是不生效，试过了加层级来控制，一样不起作用。解决方案：最后没办法，我只好把主意打在源码上，通过在node_modules/ant-design-vue/dist/reset.css文件夹里面添加了。起因是因为要使用到抽屉功能。}，才终于解决了这个问题。
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...
VUE组件中的 Drawer 抽屉实现代码
10-16
主要介绍了VUE组件 之 Drawer 抽屉 ，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
nativescript-vue-multi-drawer：一个用于创建多个侧面抽屉的NativeScript-Vue组件（支持4个侧面）
02-04
NativeScript-Vue多抽屉 一个插件，提供支持多个抽屉的抽屉组件。 所有抽屉都是可选的，并且可以单独配置。 特征： 左侧，右侧，顶部和底部的抽屉 滑动即可打开 滑动以关闭 轻按外部以关闭 打开抽屉时，主要内容...
vue-drawer-layout：Vue.js的简单DrawerLayout组件
02-06
Vue抽屉布局 对于一个简单的DrawerLayout部件 演示版 单击左上角的头像或触摸（单击）并拖动到右（左）。 如果图像没有动画，也许您的浏览器不支持APNG ，则可以转到。 依存关系 （2.x） 浏览器支持 支持现代...
ionic-vue-split-screen：Ionic Vue Web组件-分屏又称SideMenu
02-06
离子vue分屏-vuex分支查看更新的代码-https: Ionic Vue Web组件-分屏又称SideMenu 5月20日更新-ionic的最新版本，经过修改可与ionic / cli命令一起使用该项目的Vue组合版本可在此分支的你管视频与基本Vue实施的区别...
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）
07-24
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明） 该设计为DK124控制的开关电源，实现12V 2A输出； 功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；
ant-design-vue 子组件用a-drawer在点击遮罩层无法关闭
07-14
你好！对于使用 ant-design-vue 中的 a-drawer 组件，点击遮罩层无法关闭的问题，可能是因为没有正确绑定事件或者事件处理函数的原因。以下是一些可能的解决方案： 1. 确保在 a-drawer 组件中设置了 visible 属性，并将其与一个变量进行双向绑定。例如： ```html <a-drawer :visible="visible" @close="handleClose"> <!-- 子组件内容 --> </a-drawer> ``` ```javascript data() { return { visible: false }; }, methods: { handleClose() { this.visible = false; } } ``` 2. 确保点击遮罩层时，触发了关闭的事件处理函数。可以使用 `@close` 监听器或者自定义事件来处理关闭逻辑。例如： ```html <a-drawer :visible="visible" @close="handleClose"> <!-- 子组件内容 --> </a-drawer> ``` ```javascript methods: { handleClose() { // 处理关闭逻辑 this.visible = false; } } ``` 3. 检查是否有其他地方的事件冒泡干扰了点击遮罩层的事件。可以在遮罩层上添加一个点击事件来阻止冒泡。例如： ```html <a-drawer :visible="visible" @close="handleClose"> <template v-slot:mask> <div @click.stop></div> </template> <!-- 子组件内容 --> </a-drawer> ``` 希望这些解决方案能帮到你解决问题！如果还有其他疑问，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

街尾杂货店&

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

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

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

打赏作者

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

抵扣说明：

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

余额充值