vue2 element-ui 2.9.1版不支持抽屉el-drawer

最新推荐文章于 2024-08-16 00:53:06 发布
最新推荐文章于 2024-08-16 00:53:06 发布
阅读量863 收藏
点赞数
分类专栏： vue.js 文章标签： ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/souwer/article/details/131607918
版权
在一个老项目中尝试使用el-drawer组件，但在2.9.1版本的ElementUI中未生效。对比另一个运行正常的项目发现其使用的是2.14.1版本。然而，升级到2.14.1版本后遇到了菜单管理中的菜单项无法折叠的问题。计划将重点放在解决这个特定版本的菜单折叠问题上。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一个老项目中想使用抽屉 el-drawer，死活没有反应。 查了下element-ui的版本是2.9.1
在这里插入图片描述再看其他一个正常使用抽屉的项目的element-ui版本。
在这里插入图片描述但是 2.14.1 的element-ui版本又存在菜单管理无法折叠菜单项的问题。
在这里插入图片描述看来还是得抽空解决在2.14.1菜单无法折叠的问题了。

Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王佳斌
03-20 3807
vue2，element-ui，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，在elementui组件库中，使用el-drawer抽屉弹框组件，当设置append-to-body属性后，无法使用deep进行样式覆盖怎么办，关于vue+element中el-dialog设置append-to-body样式不生效问题，vue2elementUIel-dialog修改了body样式不生效问题解决方案，element组件
【区分vue2和vue3下的element UI Drawer 抽屉组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
07-18 877
在 Vue 2 中，Element UI 提供了 Drawer 抽屉组件，而在 Vue 3 中，相应的库是 Element Plus，它也提供了类似的 Drawer 组件。虽然它们的功能相似，但在属性、事件和方法的命名上可能会有所不同，以符合 Vue 3 的新特性和改进。
vue编辑页面和新增_饿了么技术团队vue开源框架Element最新版本2.9.1版本
weixin_39815345的博客
11-20 228
简介Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，基于MIT协议。目前github star 数为38k+, 是一款非常热门的桌面端组件库。对于前端开发的朋友们Element既有基于vue版本的组件库，也有基于angular版本的组件库，当前前端开发"三国鼎立"的时刻，Element 可以说是非常值得好好学习的一个桌面端组件库。官网截图2.9 版本更新新...
vue2二次封装element ui的抽屉组件el-drawer
buzhidjiaosha的博客
08-16 551
【代码】vue2二次封装element ui的抽屉组件el-drawer。
el-drawer抽屉出现黑色边框vue2
qq_46167326的博客
09-19 263
【代码】el-drawer抽屉出现黑色边框vue2。
为啥项目里用element-ui 的el-drawer抽屉 日历组件不好使
monkey7
07-07 1717
项目新功能需要用到抽屉 但是直接使用el-drawer报错 升级了element-ui也没用 这个项目element-ui 版本是2.8.2 没有日历 抽屉等组件(项目模版一直用的公司之前的) 但是更新element-ui后 仍然没有 报错 未注册 就是找不着不认呗 网上查少有类似 发现 src下的element-ui index文件 从element-ui里 import了一些插件 eg:分页 弹窗这种 并没有引入最新版本的这些插件 例如 弹窗 Vue.use(Dialog) 还要注册一下才行 他
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...
element-ui 抽屉组件（el-drawer ） 二次封装 增加resize拖曳改变宽度大小，配合表格实现快捷方式打开抽屉展示详情及操作
qq_53675083的博客
07-07 6134
可配合自定义表格进行操作数据，点击表格某一行进行抽屉展示，可上下页切换查看及功能操作，1.快捷键esc关闭抽屉，// 快捷键控制上下翻页 shiftKey+上键 上一页 shiftKey加下键 下一页 shiftKey加左键 开启弹框展示第一条数据 shiftKey加右键关闭弹框上代码 js实现拉伸部分......
使用Vue3 + ElementPlus，让抽屉（el-drawer）显示在对话框（el-dialog）中
qq_48651377的博客
05-11 1933
定位是相对于 static（position默认值）定位以外的第一个父元素进行定位，如果不存在已定位的父元素，则相对于body元素。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。定位是相对于浏览器视口来定位的，也就是说，元素的位置不会随着页面滚动而改变，始终会固定在视口的某个位置。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。解决办法：将抽屉的遮罩定位到对话框上，即。属性自定义遮罩的css样式，
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、消息弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$message、$confirm】的 遮罩层z-index问题
ylnzzl的博客
10-28 5438
解决 element-ui 抽屉弹窗、弹窗、气泡弹窗、确认弹窗【el-drawer、el-dialog、el-popover、$confirm】的 遮罩层z-index问题
element ui 2.9.1 与 2.9.2的区别
weixin_42576467的博客
01-05 219
Element UI 2.9.1 是一个版本号，而 2.9.2 也是一个版本号。这两个版本之间的区别可能会有所不同，具体取决于开发人员在这两个版本之间进行了哪些更改。一般来说，版本号较高的软件通常会包含对较旧版本的改进或修复。因此，如果你正在使用 Element UI 2.9.1，你可能希望升级到 2.9.2，以获得更好的性能和更多的新功能。 ...
element-ui的el-dialog组件中调用ref无效
jiligulu111的博客
01-04 1124
element-ui的el-dialog组件中调用ref无效的问题可能是由于组件的生命周期导致的。在el-dialog组件中，当dialog显示时，子组件可能还没有被渲染，因此无法通过ref来获取子组件的实例。这两种方法都是通过延迟获取子组件的实例，确保子组件已经被渲染完成后再进行调用。你可以根据具体情况选择其中一种方法来解决你的问题。方法二：使用v-if指令延迟渲染子组件。方法一：使用$nextTick方法。
element ui实现抽屉效果_如何给element添加一个抽屉组件的方法步骤
weixin_39757626的博客
12-18 1628
近来因为业务需要，对比iview和element库，发现element确实要比实习期间使用的iview强大点，尤其文档更为友好，但是iview的组件功能更多一点，比如分割线和抽屉组件今天特意手写一个抽屉组件，方便自己使用element库，写好的组件我已经放在我的githup了， 点这里一、实践1.分析一个抽屉组件的z-index必定是在当前页面之上的，在抽屉主体之外的区域还会有一层半透明的遮罩层，...
vue2实现一个抽屉组件封装
weixin_43845137的博客
04-25 886
【代码】vue2实现一个抽屉组件封装。
element-ui 抽屉drawer出现蓝框bug
会一点前端、会一点Java、会一点Python
09-08 1558
最近发现，element-ui的抽屉有bug，首先是自带的title，在打开抽屉时，默认出现聚焦的蓝色框框。如果没有使用抽屉组件自带的title，那页面中第一行的第一个tab或者button，也会有类似的问题出现 针对el-tabs出现蓝框的解决办法： /deep/.el-tabs__item:focus.is-active.is-focus { box-shadow: none; } 针对自带的title出现蓝色框框的解决办法： /deep/ :focus { outline.
Vue 封装导入弹框(el-drawer)模板
qq_42753983的博客
03-22 1460
Vue 封装导入弹框(el-drawer)模板
导致elementPlus组件失效的一种可能，如el-drawer失效，其他组件失效也可以试着参照本文
weixin_66130560的博客
03-23 892
问题原因：在整个项目建立时，如果已经按照官网的“快速开始”模块，对组件进行了自动导入，那么在使用组件时.....
Element组件的坑: 抽屉drawer和弹窗dialog
一只卑微的菜狗的博客
10-23 6799
针对Element框架的el-drawer添加了子组件不能渲染子组件问题（el-dialog同样适用），包括el-drawer抽屉组件显示隐藏问题以及在指定容器打开抽屉组件
vue2各种插件的支持版本
鲨鱼亲吻小鹿的博客
04-13 2731
今年大年初七（2022年2月7日），Vue3成为了默认版本，这使得一部分插件如果使用默认安装便会直接出现：“你敢安装，我就敢报错”的尴尬场面。 现在将我遇到的插件版本问题持续整理在下方： 一、vue2中要用vuex的3版本 npm i vuex@3 vue3中要用vuex的4版本 二、vue2中要用vue-router的3版本 npm i vue-router@3 vue-router4只能在vue3中使用 三、vue-cli就用最新的，vue脚手架（command lind interface
elment-ui drawer 可拖拽
最新发布
01-22
### 实现 Element UI Drawer 组件的可拖拽功能 为了使 Element UI 的 `Drawer` 组件具备可拖拽的功能，可以通过集成第三方库来增强其交互能力。具体来说，可以利用 `sortable.js` 和 `vuedraggable` 来实现这一目标。 #### 安装必要的依赖包 首先需要安装 `sortable.js` 或者 `vuedraggable` 这两个库之一[^3]： ```bash npm install sortable.js --save // 或者 npm i -S vuedraggable ``` #### 创建 Vue 组件并引入 draggable 功能 下面是一个完整的示例代码片段展示如何将 `draggable` 应用于 `el-drawer` 中: ```vue <template> <div id="app"> <!-- 使用 el-button 控制 drawer 显示隐藏 --> <el-button type="primary" @click="drawerVisible = true">打开抽屉</el-button> <!-- 抽屉组件 --> <el-drawer :visible.sync="drawerVisible" direction="rtl" size="40%"> <span slot="title"><i class="el-icon-s-operation"></i> 可拖动区域</span> <!-- 添加 draggable 属性让列表项支持拖拽 --> <draggable tag="ul" handle=".handle" :list="items" style="min-height: 20px;"> <li v-for="(item, index) in items" :key="index" class="drag-item"> {{ item.name }} <i class="el-icon-rank handle"></i> </li> </draggable> </el-drawer> </div> </template> <script> import draggable from &#39;vuedraggable&#39;; export default { components: { draggable, }, data() { return { drawerVisible: false, // 要被拖拽的数据集合 items: [ { name: "Item A" }, { name: "Item B" }, { name: "Item C" } ] }; } }; </script> <style scoped> .drag-item { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid #ddd; } .handle { cursor: move; /* 更改鼠标指针样式 */ } </style> ``` 此代码实现了当点击按钮时显示一个带有标题栏和内部可拖拽项目的侧边栏 (即 `Drawer`) 。通过设置 `tag="ul"` 参数指定渲染成无序列表 `<ul>` ，并通过自定义类名 `.handle` 设置特定图标作为手柄以便于用户识别哪些部分是可以移动的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值