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

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

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

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


回答:

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


回答:

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,点击表名只是进行里面内容的更替。


回答:

如果点击a,b表名,内容除值不一样,直接用一个el-drawer就可以了。如果是独立的,当点击b的时候,先关闭a对应的el-drawer,在打开b对应的

以上是 el-drawer切换时如何省略关闭步骤? 的全部内容, 来源链接: utcz.com/p/935002.html

回到顶部