背景:v-click-outside
点击盒子aaa外部,盒子aaa隐藏
问题:因为el-dialog
绑在了body上,点击el-dialog
里的任意内容,盒子aaa也隐藏了。
需求:点击el-dialog
里的任意内容,盒子aaa不隐藏
<div class="aaa" v-click-outside="onClickOutside">
<el-dialog :visible="dialogVisible" title="Dialog">
<!-- Dialog 内容 -->
<div></div>
</el-dialog>
</div>
onClickOutside(event) {
}
解决:给el-dialog
加上 @click.native.stop
来阻止 el-dialog 内部的点击事件冒泡。
<div class="aaa" v-click-outside="onClickOutside">
<el-dialog :visible="dialogVisible" title="Dialog" @click.native.stop>
<!-- Dialog 内容 -->
<div></div>
</el-dialog>
</div>