Vue3实现仿苹果系统侧边消息提示

2024-02-15 17:30:53

前言

说到消息提示，我们日常使用频率最多的莫过于系统自带的通知栏了。而系统自带的通知栏往往不够美观，且功能单一，因此许多前端开发者便开发出了各式各样的第三方通知栏组件来满足人们日益增长的需求。在本文中，笔者将通过使用Vue3框架从零开始实现一个仿苹果系统侧边消息提示组件，希望能帮助读者快速掌握该组件的开发方法。

实现步骤

1. 组件的创建

首先，我们需要创建一个新的Vue3组件。这可以通过在命令行中运行以下命令来实现：

vue create vue-notification

这将创建一个名为“vue-notification”的新项目。接下来，我们需要进入该项目目录，并安装必要的依赖项。

cd vue-notification
npm install

2. 编写组件代码

接下来，我们需要在项目中创建一个名为“Notification.vue”的新文件。该文件将包含组件的代码。在该文件中，我们需要添加以下代码：

<template>
  <div class="notification">
    <div class="notification-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Notification',
  props: {
    message: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'info'
    },
    duration: {
      type: Number,
      default: 3000
    }
  },
  data() {
    return {
      visible: false
    };
  },
  methods: {
    show() {
      this.visible = true;
      setTimeout(() => {
        this.visible = false;
      }, this.duration);
    }
  }
};
</script>

<style>
.notification {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

.notification-content {
  padding: 10px;
}

.notification-info {
  color: #000;
}

.notification-success {
  color: #0f9d58;
}

.notification-warning {
  color: #f44336;
}

.notification-error {
  color: #d32f2f;
}

.notification-visible {
  opacity: 1;
}

.notification-hidden {
  opacity: 0;
}
</style>

3. 注册组件

在编写完组件代码后，我们需要在Vue3实例中注册该组件。这可以通过在“main.js”文件中添加以下代码来实现：

import Notification from './components/Notification.vue';

Vue.component('Notification', Notification);

4. 使用组件

接下来，我们就可以在Vue3模板中使用该组件了。例如，我们可以通过在“App.vue”文件中添加以下代码来使用该组件：

<template>
  <div>
    <Notification message="这是一条通知消息" type="info" />
    <Notification message="这是一条成功消息" type="success" />
    <Notification message="这是一条警告消息" type="warning" />
    <Notification message="这是一条错误消息" type="error" />
  </div>
</template>

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

export default {
  components: {
    Notification
  }
};
</script>