elementui的el-message重复点击，提示会一直叠加

Element UI 的 el-message 组件本身不支持防止重复点击的行为。当用户快速点击触发消息弹出时，可能会导致多个相同的消息堆叠显示。

为了解决这个问题，你可以使用一个简单的逻辑来确保在消息已经显示的情况下不会重复触发显示新的消息。

以下是一个简单的 Vue 示例，使用 Element UI 的 MessageBox 来实现这个功能：

<template>
  <el-button :disabled="messageVisible" @click="handleClick">点击弹出消息</el-button>
</template>
 
<script>
  export default {
    data() {
      return {
        messageVisible: false
      };
    },
    methods: {
      handleClick() {
        if (!this.messageVisible) {
          this.messageVisible = true;
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          }).finally(() => {
            this.messageVisible = false;
          });
        }
      }
    }
  }
</script>

在这个例子中，我们使用了 el-button 的 disabled 属性来控制按钮的可点击状态。当 messageVisible 为 true 时，按钮被禁用，用户不能重复点击。当消息框关闭后，messageVisible 被设置回 false，允许用户再次点击。这样就可以防止消息的重叠显示。