当前位置: 首页 > 知识库问答 >
问题:

vue.js - el-drawer切换时如何省略关闭步骤?

贡英华
2023-10-09

背景:
el-drawer切换时,需要关闭,然后再打开另一个el-drawer,可以省略关闭这步吗?

955.gif
实际场景:
假如有一个el-table,点击对应表名项显示对应表的抽屉内容,当点击不同的表名时显示不同的抽屉内容。
现状:
当a表名切换到b表名时,点击a表名显示a的抽屉栏,点击b表名,要点击两次才能显示b表名对应的抽屉。两次中第一次操作伟关闭a的抽屉,第二次才是打开b表名对应的抽屉

希望效果
当a表名切换到b表名时,点击a表名显示a的抽屉栏,点击b表名,只需点击一次就能打开b表名对应的抽屉,并关闭a表名对应的抽屉。

共有2个答案

曹镜
2023-10-09

el-drawer是用v-model绑定的值来控制关闭和显示的,如果我们可以直接控制这个值,那么是不需要点击两次的,但是怎么控制这个值呢,还是要和界面进行交互,如果我们第二次可以直接点击到b表名,那就可以在点击事件中去把第一个遮罩设置为隐藏,然后显示第二个遮罩。

不过不幸的是el-drawer他的外层有一层遮罩(无论你有没有设置modal,modal为true是用el-overlay当遮罩,否则是一个div当遮罩),那么就需要绕过这个遮罩去进行页面上的交互,这有一个css属性可以做到pointer-events:none;,el-drawer有一个属性叫modal-class,可以给外层遮罩设置class,我们可以使用这两个结合处理下,让外层遮罩无法阻止我们进行页面上的交互。

剩下的就是不同el-drawer的显示隐藏切换了,具体的代码在表名的点击事件重处理就行了。或者可以就是用这一个el-drawer,点击表名只是进行里面内容的更替。

洪飞鸿
2023-10-09

关闭 Drawer 组件遮罩 modal:false,然后点击b表名自己处理 a 抽屉的关闭

 类似资料:
  • elementUI el-drawer 点击右上角 关闭按钮会卡顿,添加动画这之后 edge浏览器可以了,谷歌上还是卡。这个怎么解决

  • 我希望在我的表单的每个选项卡上都有一个切换按钮。随后在代码中使用此切换按钮,根据切换按钮中的值是真还是假来创建脚本。我希望当我选中第一个选项卡上的一个切换按钮时,其他选项卡上所有同名的切换按钮都显示相同的开/关位置。这可能吗?

  • 问题内容: 我一直在阅读,在文件末尾使用PHP close标签是一种不好的做法。标头问题在以下情况下似乎无关紧要(这是迄今为止唯一的好参数): 现代版本的PHP在php.ini中设置了output_buffering标志。如果启用了输出缓冲,则可以在输出HTML之后设置HTTP标头和cookie,因为返回的代码不会立即发送到浏览器。 每本优秀实践书籍和Wiki均以该“规则”开头,但没有人提供充分的

  • 问题内容: 如何在vue.js中切换类? 我有以下几点: 当我单击时,我想按以下方式申请课程: 这需要切换,即每次单击它都需要添加/删除类。 问题答案: 您可以让活动类依赖于布尔数据值:

  • 在iphone 15pro手机上显示的是单行溢出省略 各位大佬,在移动端如何兼容多行溢出省略呢?

  • 省略 不推荐省略 0 值单位,原因如下: CSS 规范中可以省略单位只有 [<length-percentage>](https://drafts.csswg.org/css-values-3/#typedef-length-percentage),其他比如角度单位 deg 在 Chrome 中可以省略, 这是浏览器的 Bug。 注:可以省略的单位包括:%|em|ex|ch|rem|vw|vh|v