【Element入门】Element UI 反馈组件详解

Element入门系列导航

【Element入门】1、Element UI 介绍与安装
【Element入门】2、Element UI 的基本使用
【Element入门】3、Element UI 表单组件详解
【Element入门】4、Element UI 布局组件详解
【Element入门】5、Element UI 导航组件详解
【Element入门】6、Element UI 数据展示组件详解
【Element入门】7、Element UI 反馈组件详解（本文）
【Element入门】8、Element UI 自定义主题

反馈组件在 Web 应用中起着重要的作用，它们能够及时向用户传达操作结果或提示信息，提升用户体验。Element UI 提供了多种反馈组件，包括 Dialog、Message 和 Notification 组件。本篇文章将详细介绍这些反馈组件的使用方法。

使用Dialog创建模态对话框

基本概念

Dialog 组件用于创建模态对话框，通常用于显示重要信息或询问用户确认操作。它支持自定义标题、内容和按钮，并且可以通过事件控制显示和隐藏。

基本使用

以下是一个简单的 Dialog 组件示例：

<template>
  <div id="app">
    <el-button @click="dialogVisible = true">Open Dialog</el-button>
    <el-dialog
      title="Dialog Title"
      :visible.sync="dialogVisible"
      width="30%">
      <span>This is a dialog</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      dialogVisible: false
    };
  }
};
</script>

<style>
.dialog-footer {
  text-align: right;
}
</style>

在这个示例中，我们通过 el-dialog 组件创建了一个模态对话框，并通过 visible.sync 属性绑定对话框的显示和隐藏状态。

自定义内容和按钮

Dialog 组件允许我们自定义对话框的内容和按钮，通过插槽（slot）可以实现更灵活的布局：

<template>
  <div id="app">
    <el-button @click="dialogVisible = true">Open Dialog</el-button>
    <el-dialog
      title="Custom Dialog"
      :visible.sync="dialogVisible"
      width="50%">
      <el-input v-model="input" placeholder="Please input"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="handleConfirm">Confirm</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      dialogVisible: false,
      input: ''
    };
  },
  methods: {
    handleConfirm() {
      console.log('Input value:', this.input);
      this.dialogVisible = false;
    }
  }
};
</script>

<style>
.dialog-footer {
  text-align: right;
}
</style>

在这个示例中，我们在对话框中添加了一个输入框，并在点击确认按钮时输出输入框的值。

自定义关闭事件

可以通过 before-close 属性自定义对话框关闭前的逻辑：

<template>
  <div id="app">
    <el-button @click="dialogVisible = true">Open Dialog</el-button>
    <el-dialog
      title="Dialog with before-close"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>Do you want to close this dialog?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose(done) {
      if (confirm('Are you sure to close this dialog?')) {
        done();
      }
    }
  }
};
</script>

<style>
.dialog-footer {
  text-align: right;
}
</style>

在这个示例中，我们通过 before-close 属性在关闭对话框前弹出确认提示。

使用Message和Notification组件

Message组件

Message 组件用于全局展示操作结果或提示信息，支持多种类型和显示位置。

基本使用

以下是一个 Message 组件的示例：

<template>
  <div id="app">
    <el-button @click="openMessage">Show Message</el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    openMessage() {
      this.$message({
        message: 'This is a message',
        type: 'success'
      });
    }
  }
};
</script>

在这个示例中，我们通过 this.$message 方法显示一条成功类型的消息。

不同类型的Message

Message 组件支持四种类型：success、warning、info 和 error，可以通过 type 属性设置：

<template>
  <div id="app">
    <el-button @click="openMessage('success')">Success</el-button>
    <el-button @click="openMessage('warning')">Warning</el-button>
    <el-button @click="openMessage('info')">Info</el-button>
    <el-button @click="openMessage('error')">Error</el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    openMessage(type) {
      this.$message({
        message: `This is a ${type} message`,
        type
      });
    }
  }
};
</script>

在这个示例中，我们通过不同按钮展示了四种类型的消息。

自定义显示位置

可以通过 position 属性设置消息的显示位置：

<template>
  <div id="app">
    <el-button @click="openMessage('top-left')">Top Left</el-button>
    <el-button @click="openMessage('top-right')">Top Right</el-button>
    <el-button @click="openMessage('bottom-left')">Bottom Left</el-button>
    <el-button @click="openMessage('bottom-right')">Bottom Right</el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    openMessage(position) {
      this.$message({
        message: `This is a message at ${position}`,
        position
      });
    }
  }
};
</script>

在这个示例中，我们展示了消息在不同位置的显示效果。

Notification组件

Notification 组件用于全局展示更复杂的通知信息，支持多种类型、显示位置和自定义内容。

基本使用

以下是一个 Notification 组件的示例：

<template>
  <div id="app">
    <el-button @click="openNotification">Show Notification</el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    openNotification() {
      this.$notify({
        title: 'Notification Title',
        message: 'This is a notification message',
        type: 'success'
      });
    }
  }
};
</script>

在这个示例中，我们通过 this.$notify 方法显示一条成功类型的通知。

不同类型的Notification

Notification 组件支持四种类型：success、warning、info 和 error，可以通过 type 属性设置：

<template>
  <div id="app">
    <el-button @click="openNotification('success')">Success</el-button>
    <el-button @click="openNotification('warning')">Warning</el-button>
    <el-button @click="openNotification('info')">Info</el-button>
    <el-button @click="openNotification('error')">Error</el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    openNotification(type) {
      this.$notify({
        title: `${type.charAt(0).toUpperCase() + type.slice(1)} Notification`,
        message: `This is a ${type} notification message`,
        type
      });
    }
  }
};
</script>

在这个示例中，我们通过不同按钮展示了四种类型的通知。

自定义显示位置

可以通过 position 属性设置通知的显示位置：

<template>
  <div id="app">
    <el-button @click="openNotification('top-left')">Top Left</el-button>
    <el-button @click="openNotification('top-right')">Top Right</el-button>
    <el-button @click="openNotification('bottom-left')">Bottom Left</el-button>
    <el-button @click="openNotification('bottom-right')">Bottom Right</el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    openNotification(position) {
      this.$notify({
        title: `Notification at ${position}`,
        message: `This is a notification at ${position}`,
        position
      });
    }
  }
};
</script>

在这个示例中，我们展示了如何通过 position 属性设置通知在四个不同位置的显示效果。

自定义内容

Notification 组件允许我们自定义通知的内容，通过 dangerouslyUseHTMLString 属性可以使用 HTML 字符串作为通知内容：

<template>
  <div id="app">
    <el-button @click="openCustomNotification">Show Custom Notification</el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    openCustomNotification() {
      this.$notify({
        title: 'HTML Notification',
        message: '<strong>This is a notification with HTML content</strong>',
        dangerouslyUseHTMLString: true
      });
    }
  }
};
</script>

在这个示例中，我们通过 dangerouslyUseHTMLString 属性将 HTML 字符串作为通知的内容。

结语

通过本章的学习，我们详细了解了 Element UI 提供的主要反馈组件：Dialog、Message 和 Notification 组件。Dialog 组件用于创建模态对话框，支持自定义内容和事件控制；Message 组件用于全局展示操作结果或提示信息，支持多种类型和显示位置；Notification 组件用于全局展示更复杂的通知信息，支持多种类型、显示位置和自定义内容。这些反馈组件可以帮助我们及时向用户传达操作结果或提示信息，提升用户体验。

在接下来的章节中，我们将继续深入探讨 Element UI 的其他组件和高级功能，敬请期待！希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！