vue ELMessage怎么主动关闭

Vue 中使用 Element-UI 的 `message` 或者 `this.$message` 来显示消息时，可以使用以下方式主动关闭：

1. **避免多次打开新消息并保持页面上只有一个活跃的消息**:
当你想在已有消息的基础上关闭旧的并展示新的消息时，应先判断当前是否有正在显示的消息 (`this.msg` 是否存在)。如果已存在，则调用 `close()` 方法关闭它。这样可以确保页面上的弹出框始终保持最新状态[^1]。

openMsg() {
  if (this.status) {
    if (this.msg) {
      this.msg.close()
    }
    this.msg = this.$message({
      duration: 0,
      type: 'warning',
      message: '等待中....'
    })
    setTimeout(() => {
      this.msg.close() // 关闭旧消息
      this.msg = this.$message({
        duration: 1000,
        type: 'success',
        message: '提交成功'
      })
      this.status = true
    }, 2000)
  }
}

2. **直接关闭特定消息**:
如果仅需关闭特定消息而不需要替换为新消息，可以直接调用 `msg.close()`。例如，在某个按钮点击事件中，你可以这样做：

handleButtonClick() {
  this.$message({
    duration: 0,
    type: 'info',
    message: '即将操作...'
  }).then(() => {
    // 假设msg就是之前显示的消息
    this.msg.close() // 或者 msg.value.close()（如果有返回Promise）
  })
}

通过这种方式，你可以更好地管理 Vue 中 Element-UI 的消息提示，确保它们按预期的行为呈现和消失。