深入浅出解析：仿element-ui之Message提示组件

前端

2023-09-15 07:42:04

前言

在现代Web开发中，用户界面（UI）的设计和交互至关重要。为了提升用户体验，前端开发者需要在页面中加入各种提示组件，以便及时向用户传达信息，辅助他们完成操作。

本文将以Vue3为基础，详细介绍如何封装一个类似于element-ui库中的Message消息提示组件。我们不仅会探讨组件的基本原理，还会提供详细的步骤和示例代码，帮助您掌握创建自定义提示组件的技巧，提升前端开发技能。

组件设计原理

Message组件本质上是一个可以显示各种类型消息的提示框。它通常包括以下几个关键元素：

消息内容区： 用于显示消息文本或HTML内容。
消息类型图标： 用于指示消息的类型，例如成功、错误或警告。
关闭按钮： 允许用户关闭提示框。
自动关闭时间： 在一定时间后自动关闭提示框。

在Vue3中，我们可以利用h函数来创建组件。h函数是Vue3中用于创建虚拟DOM元素的函数，它提供了强大的灵活性，使我们能够轻松创建自定义组件。

组件实现步骤

创建组件文件： 首先，需要创建一个新的Vue组件文件，例如Message.vue。
导入必要的库： 在组件文件中，需要导入必要的库，包括Vue和h函数。
定义组件模板： 使用h函数定义组件模板。模板中需要包含上述提到的关键元素，例如消息内容区、消息类型图标、关闭按钮等。
定义组件逻辑： 在组件中，需要定义组件的逻辑，例如当用户点击关闭按钮时，关闭提示框；当自动关闭时间到时，自动关闭提示框等。
导出组件： 最后，将组件导出，以便在其他组件中使用。

示例代码

<template>
  <div class="message-box" :class="`message-box--${type}`">
    <div class="message-box__content">
      <i class="message-box__icon" :class="`message-box__icon--${type}`"></i>
      <div class="message-box__text">
        <slot></slot>
      </div>
      <button class="message-box__close-button" @click="close">×</button>
    </div>
  </div>
</template>

<script>
import { h } from 'vue'

export default {
  props: {
    type: {
      type: String,
      required: true,
      validator: (value) => ['success', 'error', 'warning', 'info'].includes(value)
    },
    duration: {
      type: Number,
      default: 3000
    }
  },
  emits: ['close'],
  setup(props, { emit }) {
    const timer = null

    const close = () => {
      clearTimeout(timer)
      emit('close')
    }

    return () => {
      timer = setTimeout(() => {
        close()
      }, props.duration)

      return h(
        'div',
        {
          class: 'message-box',
          'class': `message-box--${props.type}`
        },
        [
          h(
            'div',
            {
              class: 'message-box__content'
            },
            [
              h(
                'i',
                {
                  class: `message-box__icon message-box__icon--${props.type}`
                }
              ),
              h(
                'div',
                {
                  class: 'message-box__text'
                },
                [
                  h('slot')
                ]
              ),
              h(
                'button',
                {
                  class: 'message-box__close-button',
                  onClick: close
                },
                '×'
              )
            ]
          )
        ]
      )
    }
  }
}
</script>

<style>
.message-box {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.message-box--success {
  background-color: #4caf50;
  color: #fff;
}

.message-box--error {
  background-color: #f44336;
  color: #fff;
}

.message-box--warning {
  background-color: #ffc107;
  color: #fff;
}

.message-box--info {
  background-color: #2196f3;
  color: #fff;
}

.message-box__content {
  display: flex;
  align-items: center;
}

.message-box__icon {
  margin-right: 10px;
  font-size: 1.5rem;
}

.message-box__text {
  flex: 1;
}

.message-box__close-button {
  margin-left: 10px;
  border: none;
  background: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}
</style>

使用组件

在其他组件中，我们可以使用Message组件来显示各种类型的消息。例如，在需要显示成功消息时，我们可以使用以下代码：

import Message from './Message.vue'

export default {
  methods: {
    showSuccessMessage() {
      this.$message({
        type: 'success',
        message: '操作成功！'
      })
    }
  }
}