iview弹窗打开后的回调函数
时间: 2023-10-27 14:21:09 浏览: 89
vue加载完成后的回调函数方法
在iView中,弹窗组件的打开后的回调函数可以通过 `@on-visible-change` 属性来实现。具体实现方式如下:
1. 给弹窗组件添加 `@on-visible-change` 属性,指定回调函数名称,例如 `handleVisibleChange`:
```html
<Modal v-model="visible" @on-visible-change="handleVisibleChange"></Modal>
```
2. 在 Vue 实例中定义回调函数 `handleVisibleChange`,并在函数中添加需要执行的逻辑:
```javascript
export default {
data() {
return {
visible: false,
};
},
methods: {
handleVisibleChange(visible) {
if (visible) {
console.log('弹窗打开了!');
// 添加打开弹窗后需要执行的逻辑
} else {
console.log('弹窗关闭了!');
// 添加关闭弹窗后需要执行的逻辑
}
},
},
};
```
在上述代码中,当弹窗打开时,控制台会输出 `"弹窗打开了!"`,并执行 `handleVisibleChange` 函数中的逻辑;当弹窗关闭时,控制台会输出 `"弹窗关闭了!"`,并执行 `handleVisibleChange` 函数中的逻辑。
阅读全文