element ui popover 组件中有按钮,按钮跳转到其他页面,网页跳转后 popover未关闭,如何实现点击里面按钮后关闭popover
时间: 2024-03-21 09:43:59 浏览: 50
element-ui中dialog弹窗关闭按钮失效的解决
可以使用 `@click` 事件,在按钮被点击时手动关闭 Popover 组件。具体的实现方法如下:
1. 在 Popover 组件中,给按钮添加 `@click` 事件:
```html
<el-popover>
<el-button slot="reference">Click me</el-button>
<el-button @click="handleButtonClick">Go to other page</el-button>
</el-popover>
```
2. 在组件的 `methods` 中定义 `handleButtonClick` 方法,该方法关闭 Popover 组件:
```javascript
methods: {
handleButtonClick() {
this.$refs.popover.doClose();
}
}
```
完整代码如下:
```html
<template>
<el-popover ref="popover">
<el-button slot="reference">Click me</el-button>
<el-button @click="handleButtonClick">Go to other page</el-button>
</el-popover>
</template>
<script>
export default {
methods: {
handleButtonClick() {
this.$refs.popover.doClose();
// 在这里添加跳转到其他页面的逻辑
}
}
};
</script>
```
阅读全文