- 提前在页面中藏一个弹窗
- 控制弹窗的显示与否
- 需要设置 model-value / v-model 属性,它接收 Boolean,当为 true 时显示 Dialog。
实例
<el-dialog
v-model="dialogVisible"
title="Tips"
width="500"
:before-close="handleClose"
>
<span>This is a message</span>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false">
Confirm
</el-button>
</div>
</template>
</el-dialog>