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

~想不出名字~

已于 2022-06-20 11:15:17 修改

阅读量2.4k

点赞数 2

文章标签： vue.js elementui

于 2022-05-29 20:22:27 首次发布

本文链接：https://blog.csdn.net/weixin_47673852/article/details/125035551

版权

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

～～只需要添加:close-on-click-modal=“false” 禁止点击空白关闭
～～添加：:with-header= ‘false’ 不添加title
~ ~ 阻止点击遮罩层关闭 :wrapper-closable=“false”

<el-drawer
      title="标题"
      v-model="data"
      driection='rtl' //打开方向
      size="30%"
      :with-header= 'false' // 不添加title
      :close-on-click-modal="false" // 禁止点击空白关闭
    >
    </el-drawer>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

~想不出名字~

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
el-draw抽屉禁止点击空白区域关闭

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

扫一扫

点击el-drawer抽屉之外关闭问题

coinisi_li的博客

05-08

343

遇到问题el-drawer抽屉点击空白处会关闭，与el-dialog类似。

禁止抽屉el-drawer点击内容区域外关闭

weixin_51341210的博客

12-31

4105

禁止抽屉el-drawer点击内容区域外关闭element组件禁止抽屉el-drawer点击内容区域外关闭 element组件禁止抽屉el-drawer点击内容区域外关闭 **只需添加方法 :close-on-click-modal=“false” ** <el-drawer title="标题" v-model="data" direction="rtl" size="30%" :close-on-click-modal="f

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

element-plus 工作经验总结

最新发布

汤一飞

05-11

795

项目中遇到的 element-plus 相关问题经验总结

element ui中el-drawer点击遮罩无法关闭

PinelliaLogic的博客

12-11

1025

element ui中el-drawer点击遮罩无法关闭

Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭

weixin_51341210的博客

12-02

3752

项目需求问题Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭 Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭在使用element-ui组件的时，根据项目需求，需要修改组件默认的属性值。今天根据需求需要组织点击遮罩层关闭组件el-dialog或者el-drawer <el-dialog :title="title" :visible.sync="open" width="500p

element Drawer 抽屉点击空白全局不允许关闭修改 el-dialog 默认点击遮照为不关闭\全局设置点击遮罩层不关闭 Dialog

看到我在玩请叫我去敲代码的博客

03-21

1753

element Drawer 抽屉点击空白全局不允许关闭修改 el-dialog 默认点击遮照为不关闭\全局设置点击遮罩层不关闭 Dialog

Element-UI中的Drawer 抽屉如何关闭

qq_54180801的博客

09-10

5221

Element-UI中的Drawer 抽屉如何关闭

解决el-drawer关闭之后组件内数据没有完全销毁

C422805的博客

09-01

1675

关闭抽屉组件,数据没有被销毁???

element-ui 抽屉里面嵌套弹窗

锦瑟年华L的博客

12-19

1319

element-ui 抽屉里面嵌套弹窗

Element-ui中元素滚动时el-option超出元素区域的问题

10-16

此外，Element-ui使用了一个名为`v-clickoutside`的指令来处理点击外部区域时关闭下拉菜单的行为。通过自定义类似`v-clickoutside`的混合（mixin），可以模拟处理鼠标按下和抬起事件，以此来模拟mouseup事件的触发，...

DrawerLayout去除阴影，阴影部分点击不关闭抽屉并可以触发相关view，抽屉侧滑可响应关闭

07-03

DrawerLayout去除阴影，阴影部分点击不关闭抽屉并可以触发相关view，抽屉侧滑可响应关闭

vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show

12-12

需求：点击btn,弹出modal显示图表（以折现图为例）这应该是很基本的需求也是很容易实现的，代码和效果如下：代码解释：setTem是一个方法，改变modal为true，默认为false ； chart-line是图表子组件，通过data向其传递参数，data绑定的数据是父组件mounted后拿到的数据效果图：点击btn后的确显示了modal框，但是里面的图表不能显示，接着改变子组件任何代码，迫使重新编译子组件，则子组件的图表可以正常显示分析：当点击btn时，modal框的确弹出来了，但推测其底层是使用v-show来实现显示与否，所以改变modal为true或fasle只是改变了

Vue动态生成el-checkbox点击无法赋值的解决方法

10-17

主要给大家介绍了关于Vue动态生成el-checkbox点击无法赋值的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

解决vue中el-tab-pane切换的问题

10-15

3. **关闭弹框时重置状态**：在关闭`el-dialog`的事件处理函数中，将`activeName`重置为默认值，确保下次打开时从新状态开始。 ```javascript methods: { closeDialog() { this.activeName = 'second'; // 将...

elementui更改el-dialog关闭按钮的图标d的示例代码

10-15

在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者交互体验。本篇文章将详细讲解如何更改`el-dialog`关闭按钮的图标。首先，让我们了解`el-dialog`的基本结构。`el-dialog`的...

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

syx_cainiao的博客

06-22

7005

在做项目的时候页面上需要设置的东西太多，所以将所有的设置按钮归于一个，点击后出现一个抽匣，在上面做设置就是了 Drawer 抽屉的设置 <el-drawer title="我是标题" :with-header="drawerProp.withHeader" size="35%" :append-to-body="drawerProp.appendToBody" :visible.sync="drawerProp.drawe

vue el-drawer 想要在指定div打开，并且设置自定义的蒙层效果。而且支持嵌套drawer进行设置。

qq_36571836的博客

05-18

3852

2. 然后还要给 el-drawer设置样式 position:absolute;首先设置两个属性也就是隐藏el-drawer自带的蒙层。:modal-append-to-body=“false” // 遮罩层不能插入至 body。:wrapperClosable= “false”, // 点击遮罩层不可关闭drawer。需要 append-to-body： false, 因为设置为true会插入body。:modal=“false” // 不需要遮罩层。在el-drawer出现的实现出现该蒙层。

antd mobile 的 Drawer点击失效以及无法弹出

Akukudeteng的博客

05-10

1964

主要有几个方面的注意点！ 1. Drawer的必备样式要写上（经常性原因）官网有这样一段样式，要加上，不然会造成抽屉无法弹出在less样式文件中，添加这段样式 import styles from './index.less'; ..... <Drawer className={styles.mydrawer} ..... > less: /*-----抽屉必备样式-----*/ .my

el-drawer判断是不是点击在空白区域

06-16

在el-drawer组件中，可以通过点击空白区域来关闭抽屉。判断点击是否在空白区域的方法如下： 1. 给el-drawer的容器元素绑定一个click事件监听器，当点击容器元素时触发。 2. 在事件监听器中，判断点击的目标元素是否是el-drawer的内容区域，如果是，则不关闭抽屉；如果不是，则关闭抽屉。代码示例： ```javascript // 获取el-drawer容器元素 const drawerContainer = document.querySelector('.el-drawer__container'); // 给容器元素绑定click事件监听器 drawerContainer.addEventListener('click', (event) => { // 判断点击的目标元素是否是el-drawer的内容区域 if (!event.target.closest('.el-drawer__wrapper')) { // 如果不是，则关闭抽屉 this.closeDrawer(); } }); ``` 在上述代码中，`event.target`表示点击的目标元素，`event.target.closest('.el-drawer__wrapper')`表示在点击的目标元素及其父元素中查找最近的`.el-drawer__wrapper`元素，如果找到则返回该元素，否则返回null。如果返回的结果是null，则说明点击的目标元素不是el-drawer的内容区域，可以关闭抽屉。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交