手把手教你仿照 Element Plus 实现一个 Message 组件

2024-02-08 07:07:48

尽管 Message 组件看起来很简单，但想要打造一个完善的组件，仍有许多细节需要考虑。本文将手把手带你仿照 Element Plus 实现一个 Message 组件，从组件设计到功能实现，逐一解析。

组件设计

首先，我们来规划 Message 组件的基本结构。它需要包括以下几个部分：

消息容器： 负责显示消息内容和操作按钮。
消息内容： 展示消息的文本或 HTML 内容。
消息类型： 标识消息的类型，如成功、警告或错误。
消息操作： 提供关闭或其他操作按钮。

实现步骤

1. 组件初始化

<template>
  <div class="message-container" :class="{ 'message-container--active': active }">
    <div class="message-content" :class="messageType">
      <slot></slot>
    </div>
    <button class="message-close" @click="close">X</button>
  </div>
</template>

<script>
export default {
  name: 'Message',
  props: {
    messageType: {
      type: String,
      default: 'info',
    },
    duration: {
      type: Number,
      default: 3000,
    },
  },
  data() {
    return {
      active: false,
    };
  },
  methods: {
    close() {
      this.active = false;
    },
    show() {
      this.active = true;
      setTimeout(() => {
        this.close();
      }, this.duration);
    },
  },
  mounted() {
    this.show();
  },
};
</script>

首先，我们创建了 Message 组件，它包含一个消息容器、消息内容、消息类型和关闭按钮。然后，我们定义了 messageType 和 duration 属性，并初始化了 active 数据，用于控制消息的显示和隐藏。

2. 使用 defineExpose 公开方法

要从父组件调用 Message 组件的方法，我们需要使用 defineExpose 函数公开这些方法。

<script>
export default {
  ...
  defineExpose({
    close,
  }),
  ...
};
</script>

这样，父组件就可以通过 $refs.message.close() 调用 Message 组件的 close 方法。

3. 使用 shallowReactive 监听属性变化

当 messageType 属性发生变化时，我们需要更新消息容器的样式。为此，我们可以使用 shallowReactive 函数监听属性变化。

<script>
import { shallowReactive } from 'vue';
export default {
  ...
  setup() {
    const messageType = shallowReactive({ value: 'info' });
    return {
      messageType,
      ...
    };
  },
  ...
};
</script>

在 setup 函数中，我们使用 shallowReactive 创建了一个响应式对象，并将其 value 属性绑定到 messageType 属性。这样，当 messageType 属性改变时，消息容器的样式也会自动更新。

4. 自定义事件

为了让父组件知道消息已关闭，我们可以发出一个自定义事件。

<script>
export default {
  ...
  methods: {
    ...
    close() {
      this.$emit('close');
      this.active = false;
    },
  },
  ...
};
</script>

现在，父组件可以通过监听 close 事件来响应消息的关闭。

5. 单元测试

为了确保组件正常工作，我们可以编写单元测试。

import { mount } from '@vue/test-utils';
import Message from './Message.vue';

describe('Message', () => {
  it('should show and hide message', async () => {
    const wrapper = mount(Message);
    expect(wrapper.find('.message-container').classes()).toContain('message-container--active');
    await wrapper.vm.close();
    expect(wrapper.find('.message-container').classes()).not.toContain('message-container--active');
  });
});