el-popover 嵌套 意外关闭
时间: 2024-01-14 20:21:12 浏览: 95
el-popover 嵌套意外关闭的问题可以通过以下解决方法来解决:
1. 使用 stop-click-event 修饰符:在 el-select 组件上添加 stop-click-event 修饰符可以阻止点击事件冒泡到 el-popover 组件,从而避免意外关闭。例如:
```html
<el-popover>
<el-select v-model="value" @click.stop>
<!-- options -->
</el-select>
</el-popover>
```
2. 使用 append-to-body 属性:将 el-select 的 options 弹框渲染到 body 上,而不是父元素 el-popover 上,这样点击 options 弹框时不会触发 el-popover 的关闭条件。例如:
```html
<el-popover>
<el-select v-model="value" :append-to-body="true">
<!-- options -->
</el-select>
</el-popover>
```
3. 使用 v-model 控制显示状态:通过在 el-popover 上使用 v-model 控制显示状态,而不是依赖点击事件来进行显隐,可以避免意外关闭。例如:
```html
<el-popover v-model="popoverVisible">
<el-select v-model="value">
<!-- options -->
</el-select>
</el-popover>
```
```javascript
data() {
return {
popoverVisible: false,
value: ''
}
}
```
阅读全文