轻松入门：Vue3 + TypeScript打造简洁 Message 组件！

2023-11-01 22:04:08

使用 Vue3 + TypeScript 构建动态且可定制的 Message 组件

在现代 Web 开发中，提供出色的用户体验至关重要。Message 组件作为一种常用的 UI 元素，可以轻松地向用户传达重要信息、错误提示或成功反馈。为了创建更加高效且动态的 Message 组件，我们不妨借助 Vue3 和 TypeScript 的强大功能。

搭建开发环境

首先，你需要安装 Node.js 和 npm。然后，使用命令行工具创建项目，并安装 Vue3 和 TypeScript。接下来，创建一个名为 Message.vue 的组件，并添加以下代码：

<template>
  <div class="message-container">
    <div class="message-item" v-for="item in messages" :key="item.id">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Message',

  data() {
    return {
      messages: [],
    };
  },

  methods: {
    addMessage(content) {
      this.messages.push({
        id: Date.now(),
        content,
      });
    },

    removeMessage(id) {
      this.messages = this.messages.filter(item => item.id !== id);
    },
  },
});
</script>

<style>
.message-container {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
}

.message-item {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #eee;
  color: #333;
}
</style>

MessageItem 组件：样式与逻辑

MessageItem 组件负责 Message 组件中单个信息弹框的样式和自动消失的逻辑。以下是 MessageItem.vue 的代码：

<template>
  <div class="message-item" :class="{ 'error': type === 'error', 'success': type === 'success' }">
    {{ content }}
    <button type="button" @click="close">X</button>
  </div>
</template>

<script>
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'MessageItem',

  props: {
    content: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      default: 'info',
      validator(value) {
        return ['info', 'success', 'error'].includes(value);
      },
    },
  },

  methods: {
    close() {
      this.$emit('close');
    },
  },
});
</script>

<style>
.message-item {
  padding: 10px;
  margin-bottom: 10px;
  color: #333;
}

.message-item.error {
  background-color: #ff0000;
  color: #fff;
}

.message-item.success {
  background-color: #008000;
  color: #fff;
}

.message-item button {
  float: right;
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
</style>

MessageList 组件：管理多个 Message

MessageList 组件负责管理多个 Message 组件，并提供统一的接口来添加、删除和关闭 Message。以下是 MessageList.vue 的代码：

<template>
  <div class="message-list">
    <message-item v-for="item in messages" :key="item.id" :content="item.content" :type="item.type" @close="removeMessage(item.id)"></message-item>
  </div>
</template>

<script>
import { defineComponent, PropType } from 'vue';
import MessageItem from './MessageItem.vue';

export default defineComponent({
  name: 'MessageList',

  components: {
    MessageItem,
  },

  props: {
    messages: {
      type: Array as PropType<Message[]>,
      default: () => [],
    },
  },

  methods: {
    removeMessage(id) {
      this.$emit('remove-message', id);
    },
  },
});
</script>

<style>
.message-list {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
}
</style>

使用 Message 组件

现在，你已经拥有了一个功能齐全的 Message 组件。在你的 Vue3 项目中，你可以通过以下方式使用它：

<template>
  <message-list :messages="messages"></message-list>
</template>

<script>
import { defineComponent } from 'vue';
import MessageList from './MessageList.vue';

export default defineComponent({
  name: 'App',

  components: {
    MessageList,
  },

  data() {
    return {
      messages: [],
    };
  },

  methods: {
    addMessage(content, type = 'info') {
      this.messages.push({
        id: Date.now(),
        content,
        type,
      });

      setTimeout(() => {
        this.removeMessage(Date.now());
      }, 3000);
    },

    removeMessage(id) {
      this.messages = this.messages.filter(item => item.id !== id);
    },
  },
});
</script>