elementui close

关闭 Element UI 组件的方法

Element UI 提供了多种方式关闭弹窗、对话框或其他交互组件，具体方法取决于组件的类型。

关闭 Dialog 对话框

通过 visible.sync 控制 Dialog 的显示与隐藏：

<el-dialog :visible.sync="dialogVisible" title="提示">
  <span>这是一段内容</span>
</el-dialog>

data() {
  return {
    dialogVisible: false
  }
}

直接修改 dialogVisible 为 false 即可关闭对话框。

关闭 Message 消息提示

手动调用 close 方法关闭 Message：

this.$message({
  message: '提示消息',
  duration: 0, // 设置为 0 表示不自动关闭
  showClose: true // 显示关闭按钮
});

用户点击关闭按钮或调用 this.$message.closeAll() 关闭所有 Message。

关闭 Notification 通知

手动关闭 Notification：

const notification = this.$notify({
  title: '标题',
  message: '消息内容',
  duration: 0, // 不自动关闭
  showClose: true // 显示关闭按钮
});

// 手动关闭
notification.close();

调用 this.$notify.closeAll() 可关闭所有通知。

关闭 Popover 弹出框

通过 v-model 控制 Popover 的显示：

<el-popover v-model="popoverVisible">
  <p>弹出内容</p>
  <el-button @click="popoverVisible = false">关闭</el-button>
</el-popover>

设置 popoverVisible 为 false 即可关闭 Popover。

关闭 Loading 加载

手动关闭 Loading：

const loading = this.$loading({
  lock: true,
  text: '加载中...'
});

// 关闭 Loading
loading.close();

总结

Element UI 组件的关闭方式通常包括：

• 通过 v-model 或 visible.sync 控制显示状态（如 Dialog、Popover）。
• 调用实例的 close() 方法（如 Notification、Loading）。
• 使用全局方法关闭所有实例（如 this.$message.closeAll()）。