获取弹窗el-dialog是否展示
时间: 2023-07-31 10:09:17 浏览: 46
您可以通过以下方式来获取弹窗 `el-dialog` 是否展示:
1. 通过 `ref` 属性引用弹窗组件,并获取其实例:
```html
<template>
<el-dialog ref="dialogRef" :visible="dialogVisible">
<!-- 弹窗内容 -->
</el-dialog>
</template>
```
```javascript
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
// 获取弹窗是否展示
isDialogVisible() {
return this.$refs.dialogRef.visible;
}
}
};
</script>
```
在上述代码中,我们使用 `ref` 属性将弹窗组件 `el-dialog` 引用为 `dialogRef`,然后通过 `this.$refs.dialogRef.visible` 可以获取弹窗的可见状态。
2. 使用 `$refs` 来访问 `el-dialog` 组件实例中的 `visible` 属性:
```html
<template>
<el-dialog ref="dialogRef" :visible="dialogVisible">
<!-- 弹窗内容 -->
</el-dialog>
</template>
```
```javascript
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
// 获取弹窗是否展示
isDialogVisible() {
return this.$refs.dialogRef.$refs.dialog.visible;
}
}
};
</script>
```
在这个例子中,我们使用 `$refs` 来访问组件实例中的 `visible` 属性,即 `this.$refs.dialogRef.$refs.dialog.visible`。
以上是两种常见的获取弹窗 `el-dialog` 是否展示的方法,您可以根据自己的实际情况选择适合您的方式。