应用element-ui中Drawer 抽屉并去除Drawer 标题自带蓝色框

最新推荐文章于 2024-09-25 09:08:57 发布

syx_cainiao

最新推荐文章于 2024-09-25 09:08:57 发布

阅读量7k

点赞数 3

分类专栏：前端文章标签： html5 vue.js css3

本文链接：https://blog.csdn.net/syx_cainiao/article/details/106905477

版权

本文介绍了在Vue.js项目中使用Element-UI的Drawer组件时，如何处理点击抽屉打开后标题出现的蓝色边框，提供了解决这一视觉问题的方法。

摘要由CSDN通过智能技术生成

在做项目的时候页面上需要设置的东西太多，所以将所有的设置按钮归于一个，点击后出现一个抽匣，在上面做设置就是了

Drawer 抽屉的设置

<el-drawer
        title="我是标题"
        :with-header="drawerProp.withHeader"
        size="35%"
        :append-to-body="drawerProp.appendToBody"
        :visible.sync="drawerProp.drawer"
        :direction="drawerProp.direction"
        :modal = "drawerProp.model"
        :before-close="handleClose">
</el-drawer>

在data（）中设置：

drawerProp:{
   
              direction: 'ltr&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

syx_cainiao

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

去除element-ui中el-drawer标题自带黑色框

郭宝的博客

04-21

2193

背景在使用Element-UI中的 <el-drawer 组件时，出现了默认选中标题的问题，如下截图解决办法：如果使用了scss预处理器，那么可以通过 ::v-deep 来修改样式，如下代码： ::v-deep :focus { outline: 0; } 或 /deep/ :focus { outline: 0; } 效果图如下： ...

element-ui 抽屉组件（el-drawer ）二次封装增加resize拖曳改变宽度大小，配合表格实现快捷方式打开抽屉展示详情及操作

qq_53675083的博客

07-07

5985

可配合自定义表格进行操作数据，点击表格某一行进行抽屉展示，可上下页切换查看及功能操作，1.快捷键esc关闭抽屉，// 快捷键控制上下翻页 shiftKey+上键上一页 shiftKey加下键下一页 shiftKey加左键开启弹框展示第一条数据 shiftKey加右键关闭弹框上代码 js实现拉伸部分......

2 条评论您还未登录，请先登录后发表或查看评论

去除 element-ui 打开drawer 标题自带蓝色框

kikikiuu的博客

06-05

2138

今天项目要求需要做一个drawer,在配置的时候，发现每次打开都会有个蓝色的框框显示，然后过一会就会消失实在是太丑了，本星人受不了决定研究把他去除在百度的时候，发现原来是element里面自带的解决方法如下： <style lang="scss" scoped> /deep/ :focus{outline:0;} </style> 直接加一个deep 穿梭给element更改样式，当他聚焦的时候outline为零 ...

关于element抽屉el-drawer被遮罩层覆盖的解决方法

最新发布

m939499的博客

09-25

505

情景：在使用多个弹出抽屉时，当打开第一个抽屉，点击某个部分弹出新的抽屉，然后在关闭新的抽屉后，第一个抽屉会被遮罩层整个覆盖，无法点击也无法取消，只能整体刷新窗口才能正常。这是由于元素的一些层级设置不同导致的，所以蒙层被放在了最顶端。解决方法就是加上如下2行代码。

/deep/ 深度选择器

人间草木

09-17

869

vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。 <-- less语法 --> .wrap{ .class1{ font-size:12px; } /deep/ .class2{ font-size:20px; //...

解锁新技能：如何去除element-ui中el-drawer标题自带蓝色框

票票的博客

07-16

2742

通过穿透样式来修改:focus的属性 /deep/ :focus { outline: 0; }

修改 el-drawer title 样式

qq_33240556的博客

07-10

1198

Element Plus 提供了在组件上添加自定义类名的方式，这样可以更精确地控制样式：-- 组件内容 --> </ el-drawer >-- 组件内容 --> </ el-drawer >-- 组件内容 --> </ el-drawer >-- 组件内容 --> </ el-drawer >-- 组件内容 --> </ el-drawer ></-- 组件内容 --> </ el-drawer >通过上述方法，您可以灵活地修改el-drawer组件的标题样式，以适应您的界面设计需求。

版本2.4 element-ui 离线中文文档api

01-05

Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，用于构建美观、可自定义且响应式的用户界面。版本 2.4 是 Element UI 的一个重要里程碑，其中包含了大量的改进和优化。这个离线版的 ...

根据element+vue 自定义dialog+drawer组件弹窗+抽屉无覆盖 + 可拖拽.7z

12-09

在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...

element ui 手动关闭Drawer抽屉组件的方法

qq_46239972的博客

05-02

9712

element ui 手动关闭Drawer抽屉组件的方法在element ui的官方文档中给出了关闭Drawer组件的方法，但是在文档中并没有给出具体的示例，而且这个方法的说明也没有给出具体的方法。我这里有一个需要通过点击抽屉内的按钮在完成一定的功能后顺便关闭抽屉组件的需求，可以像以下这么完成。首先在需要操作的抽屉组件上使用ref来将抽屉组件的实例信息注册到父组件也就是当前文件的自定义组件的的ref对象上，然后直接在自定义组件的方法中使用刚刚注册到ref对象上，然后直接在自定义组件的方法中使用刚

el-drawer组件封装及调用（包含动画效果）

qq_42241873的博客

08-05

7390

el-drawer组件封装及调用（包含动画效果）开发项目中用到elementUI的抽屉组件，但是都没有去封装成组件并且加入动画效果，这篇文章参考其他人的文章写的，在这里只是做个记录；界面效果参考elementui官网【网址：https://element.eleme.io/#/zh-CN/component/drawer】动画效果即可；这里就不展示了；为尊重他人成果，这里是在下参考借鉴的网址：网址废话不多说，上代码并进行注释以下是封装好的组件 <template>

elementUI Drawer 抽屉打开时表单自动聚焦问题解决

weixin_44801790的博客

07-08

1507

问题：打开drawer弹窗后时间选择器自动聚焦。解决：在时间选择器上添加disabled属性，打开drawer抽屉时先让选择器禁用disabled=true，在页面渲染完成后再打开选择器的禁止。如果只是输入框直接执行表单的blur事件。 ...

element ui实现抽屉效果_如何给element添加一个抽屉组件的方法步骤

weixin_39757626的博客

12-18

1584

近来因为业务需要，对比iview和element库，发现element确实要比实习期间使用的iview强大点，尤其文档更为友好，但是iview的组件功能更多一点，比如分割线和抽屉组件今天特意手写一个抽屉组件，方便自己使用element库，写好的组件我已经放在我的githup了，点这里一、实践1.分析一个抽屉组件的z-index必定是在当前页面之上的，在抽屉主体之外的区域还会有一层半透明的遮罩层，...

elementui-drawer模板

qq_42730111的博客

07-11

1791

【代码】elementui-drawer模板。

修改elementui抽屉样式

wulincoo

03-08

7091

使用抽屉组件 <el-drawer> :visible.sync="RobotModuleShow" direction="ltr" :modal="false" :wrapper-closable="false" :show-close="false"

el-draw抽屉禁止点击空白区域关闭

weixin_47673852的博客

05-29

2694

el-draw抽屉禁止点击空白区域关闭及不展示标题title

修改element组件样式不生效问题

h5240l的博客

03-31

2759

原因：style添加了scoped 解决1：去除scoped，但是对类名约束性更强了，可以给组件再添加一个类，以限制style在其他组件中生效 2：更改主题 3.添加/deep/ 或::v-deep /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { background-color: #ff6600; } ::v-deep .el-paginat

去掉element-dialog中header部分

weixin_47194802的博客

08-26

6706

我想要去掉一个弹出层的头部，因为用不到。添加一个这个属性即可。

去除 element-ui 打开Drawer 标题自带蓝色框

cnsummerLi

12-31

7867

1.el-ui文档实例 2.代码实现不要把样式写在 scoped中否则不生效 <style rel="stylesheet/scss" lang="scss"> :focus{ outline:0; } </style>

vue-element-admin的抽屉组件

09-23

### 回答1：关于vue-element-admin的抽屉组件，我可以回答。抽屉组件是Vue-Element-Admin中一种常见的UI组件，通常用于在界面上打开一个侧边栏，展示与当前页面相关的信息或操作。抽屉组件通常由一个触发按钮和一个侧边栏组成，在点击触发按钮后，侧边栏会从页面的侧边滑出，显示出其中的内容。这个组件在Vue-Element-Admin中的使用也比较简单，只需要在相应的页面组件中引入抽屉组件，然后在template中使用即可。 ### 回答2： vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统框架。其中的抽屉组件是一种常见的界面元素，以便在用户点击某个触发按钮时，将一个侧边栏或抽屉式的面板从屏幕边缘展开。下面是关于 vue-element-admin 的抽屉组件的一些特点和用法。首先，vue-element-admin 的抽屉组件支持多种触发方式，包括按钮点击、链接点击、图标点击等。通过简单的配置即可实现不同的触发效果。其次，抽屉组件可以在页面内的任何位置进行配置，并且可以自定义属性，比如宽度、位置等。这样可以根据实际需求，将抽屉组件放在不同的区域展示，并具有灵活的布局。另外，抽屉组件还支持多种动画效果，比如淡入淡出、滑动等。这些效果可以通过简单的配置进行设置，使页面展示更加流畅和动感。在使用方面，只需在模板中调用抽屉组件的标签，并设置相应的属性和事件，就可以实现抽屉的展开和关闭操作。同时，可以结合其他组件和数据进行交互，实现更加复杂的功能。总之，vue-element-admin 的抽屉组件提供了一种简单、灵活的方式来实现抽屉式的界面效果，可以方便地用于后台管理系统的开发。无论是在布局美观性还是交互体验上，都具有很高的可定制性和扩展性。 ### 回答3： vue-element-admin是一个基于Vue.js和Element UI的后台管理系统模板，它提供了丰富的组件和功能，包括抽屉组件（Drawer）。抽屉组件是vue-element-admin中常用的一个组件，用于实现侧边栏的展开和收缩功能。在vue-element-admin中，抽屉组件通常用于显示左侧菜单栏，在点击菜单项时展开或收缩对应的子菜单。抽屉组件的主要特点有： 1. 支持多级菜单：抽屉组件可以嵌套使用，实现多级菜单的展开和收缩。 2. 可配置性强：通过配置数据源，可以自定义菜单项的文本、图标、路径等属性，灵活地适应不同的需求。 3. 用户友好的交互效果：在抽屉组件中，菜单项的展开或收缩通过动画效果呈现，使用户操作更加流畅，并且可以通过点击菜单项外的区域来关闭抽屉，提供更好的用户体验。 4. 状态管理灵活：抽屉组件采用Vue.js的响应式数据机制，在抽屉展开或收缩时，组件会自动更新状态，例如更新菜单项的选中状态。要在vue-element-admin中使用抽屉组件，首先需要在代码中导入抽屉组件，然后根据需要进行配置和使用。例如，可以通过v-for指令循环遍历菜单项，动态生成抽屉中的菜单，并通过点击事件监听菜单项的点击事件，实现展开子菜单或跳转到对应页面的功能。总之，vue-element-admin的抽屉组件是一个功能强大且灵活的组件，可以帮助开发者快速实现后台管理系统中的菜单展开和收缩功能，提供良好的用户体验。