vue实现系统通知

Vue 实现系统通知功能

使用 Vue 的组件化实现通知

创建一个独立的通知组件，例如 Notification.vue。这个组件可以接收消息、类型和显示时间等参数，并通过动画效果展示通知。

<template>
  <transition name="fade">
    <div v-if="show" :class="['notification', type]">
      {{ message }}
    </div>
  </transition>
</template>

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

<style>
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  border-radius: 4px;
  color: white;
  z-index: 9999;
}

.notification.info {
  background-color: #1890ff;
}

.notification.success {
  background-color: #52c41a;
}

.notification.warning {
  background-color: #faad14;
}

.notification.error {
  background-color: #f5222d;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

创建全局通知服务

为了实现全局调用，可以创建一个通知服务，并在 Vue 原型上挂载该方法。

// notification.js
import Vue from 'vue'
import Notification from './Notification.vue'

const NotificationConstructor = Vue.extend(Notification)

const notify = (options) => {
  const instance = new NotificationConstructor({
    propsData: options
  })
  instance.$mount()
  document.body.appendChild(instance.$el)
  return instance
}

export default {
  install(Vue) {
    Vue.prototype.$notify = notify
  }
}

在 main.js 中安装插件：

import Vue from 'vue'
import Notification from './plugins/notification'

Vue.use(Notification)

在组件中使用通知

在任何 Vue 组件中，都可以通过 this.$notify 方法来触发通知：

this.$notify({
  message: '这是一条成功消息',
  type: 'success',
  duration: 5000
})

实现通知队列管理

为了避免多个通知重叠，可以实现一个通知队列管理系统：

// 修改 notification.js
const notificationQueue = []
let isShowing = false

const showNextNotification = () => {
  if (notificationQueue.length === 0 || isShowing) return

  isShowing = true
  const options = notificationQueue.shift()
  const instance = new NotificationConstructor({
    propsData: options
  })

  instance.$mount()
  document.body.appendChild(instance.$el)

  instance.$on('closed', () => {
    isShowing = false
    showNextNotification()
  })
}

const notify = (options) => {
  notificationQueue.push(options)
  showNextNotification()
}

添加关闭事件

修改 Notification.vue 组件，在关闭时触发事件：

<script>
export default {
  // ...
  methods: {
    close() {
      this.show = false
      this.$emit('closed')
    }
  },
  mounted() {
    this.show = true
    setTimeout(() => {
      this.close()
    }, this.duration)
  }
}
</script>

响应式通知位置

可以通过 props 控制通知的位置：

<template>
  <div :style="positionStyle">
    <!-- ... -->
  </div>
</template>

<script>
export default {
  props: {
    position: {
      type: String,
      default: 'top-right',
      validator: value => {
        return ['top-right', 'top-left', 'bottom-right', 'bottom-left'].includes(value)
      }
    }
  },
  computed: {
    positionStyle() {
      const positions = {
        'top-right': { top: '20px', right: '20px' },
        'top-left': { top: '20px', left: '20px' },
        'bottom-right': { bottom: '20px', right: '20px' },
        'bottom-left': { bottom: '20px', left: '20px' }
      }
      return positions[this.position]
    }
  }
}
</script>

使用第三方库

如果不想自己实现，可以使用成熟的 Vue 通知库：

1. vue-notification：轻量级通知插件

   npm install vue-notification

2. element-ui 的 Notification：如果你使用 Element UI

   this.$notify({
     title: '标题',
     message: '消息内容',
     type: 'success'
   })

3. ant-design-vue 的 message：如果你使用 Ant Design Vue

   this.$message.success('这是一条成功消息')

自定义通知内容

对于更复杂的通知内容，可以使用插槽：

<template>
  <transition name="fade">
    <div v-if="show" :class="['notification', type]">
      <slot></slot>
    </div>
  </transition>
</template>

使用时：

<notification type="success">
  <h3>操作成功</h3>
  <p>详细信息...</p>
</notification>

以上方法提供了从简单到复杂的 Vue 通知实现方案，可以根据项目需求选择适合的方式。