Vue3 Notification组件开发逼格满满！比antd还好用的组件库

前端

2023-10-15 18:35:32

Vue3已经发布有一段时间了，相信很多人都已经开始使用它了。Vue3相比于Vue2有很多新的特性和改进，比如：

更好的性能
更简单的语法
更强大的工具支持

如果您还没有尝试过Vue3，我强烈建议您试一试。它绝对会让您感到惊喜。

今天，我们将使用Vue3和TypeScript构建一个功能齐全的通知组件。我们将介绍通知组件的结构、样式、功能和使用。

通知组件的结构

我们的通知组件将由以下几个部分组成：

一个容器元素，用于容纳通知消息
一个标题元素，用于显示通知的标题
一个内容元素，用于显示通知的内容
一个关闭按钮，用于关闭通知

我们可以使用以下HTML代码来定义通知组件的结构：

<template>
  <div class="notification">
    <div class="notification-header">
      <h2 class="notification-title">{{ title }}</h2>
      <button class="notification-close-button" @click="closeNotification">
        &times;
      </button>
    </div>
    <div class="notification-body">
      {{ content }}
    </div>
  </div>
</template>

通知组件的样式

接下来，我们需要为通知组件添加一些样式。我们可以使用以下CSS代码来定义通知组件的样式：

.notification {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 300px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notification-title {
  margin-right: 10px;
}

.notification-close-button {
  border: none;
  background-color: transparent;
  font-size: 16px;
  cursor: pointer;
}

.notification-body {
  margin-top: 10px;
}

通知组件的功能

接下来，我们需要为通知组件添加一些功能。我们可以使用以下JavaScript代码来定义通知组件的功能：

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Notification',
  props: {
    title: {
      type: String,
      required: true,
    },
    content: {
      type: String,
      required: true,
    },
  },
  methods: {
    closeNotification() {
      this.$emit('close');
    },
  },
});

通知组件的使用

最后，我们可以将通知组件添加到我们的Vue应用程序中。我们可以使用以下HTML代码将通知组件添加到我们的Vue应用程序中：

<template>
  <div>
    <notification :title="title" :content="content" @close="closeNotification" />
  </div>
</template>

<script>
import Notification from './Notification.vue';

export default {
  components: {
    Notification,
  },
  data() {
    return {
      title: 'This is a notification title',
      content: 'This is a notification content',
    };
  },
  methods: {
    closeNotification() {
      this.title = '';
      this.content = '';
    },
  },
};
</script>