Vue通知提醒框（Notification）

Vue3通知提醒框（Notification）

可自定义设置以下属性：

• 自动关闭的延时时长（duration），单位ms，默认4500ms
• 消息从顶部弹出时，距离顶部的位置（top），单位px，默认24px
• 消息从底部弹出时，距离底部的位置（bottom），单位px，默认24px
• 消息弹出位置（placement），可选：左上topLeft，右上topRight（默认），左下bottomLeft，右下bottomRight

调用时可选以下五个方法对应五种不同样式：

• this.$refs.notification.open(notification) // 默认使用
• this.$refs.notification.info(notification) // info调用
• this.$refs.notification.success(notification) // success调用
• this.$refs.notification.error(notification) // error调用
• this.$refs.notification.warn(notification) // warn调用

五种样式效果如下图：

open()调用：

info()调用：

 success()调用：

error()调用：

warn()调用：

①创建通知提醒框组件Notification：

<script>
export default {
  name: 'Notification',
  props: {
    duration: { // 自动关闭的延时时长,单位ms，默认4500ms；设置null时，不自动关闭
      type: Number,
      default: 4500
    },
    top: { // 消息从顶部弹出时，距离顶部的位置，单位像素px
      type: Number,
      default: 24
    },
    bottom: { // 消息从底部弹出时，距离底部的位置，单位像素
      type: Number,
      default: 24
    },
    placement: { // 消息弹出位置，可选topLeft,topRight,bottomLeft,bottomRight
      type: String,
      default: 'topRight'
    }
  },
  data () {
    return {
      colorStyle: { // 颜色主题对象
        info: '#1890FF',
        success: '#52c41a',
        error: '#f5222d',
        warn: '#faad14'
      },
      mode: 'info', // 调用方法对应的样式主题
      resetTimer: null,
      hideIndex: [],
      hideTimers: [],
      notificationData: []
    }
  },
  computed: {
    clear () { // 所有提示是否已经全部变为false
      return this.hideIndex.length === this.notificationData.length
    }
  },
  watch: {
    clear (to, from) { // 所有提示都消失后重置
      if (!from && to) {
        this.resetTimer = setTimeout(() => {
          this.hideIndex.splice(0)
          this.notificationData.splice(0)
        }, 500)
      }
    }
  },
  methods: {
    onEnter (index) {
      clearTimeout(this.hideTimers[index])
      this.$set(this.hideTimers, index, null)
    },
    onLeave (index) {
      if (this.duration) {
        this.$set(this.hideTimers, index, setTimeout(() => {
          this.onHideNotification(index)
        }, this.duration))
      }
    },
    show (notification) {
      clearTimeout(this.resetTimer)
      this.notificationData.push(notification)
      this.hideTimers.push(null)
      const index = this.notificationData.length - 1
      if (this.duration) {
        this.$set(this.hideTimers, index, setTimeout(() => {
          this.onHideNotification(index)
        }, this.duration))
      }
    },
    open (notification) {
      this.mode = 'open'
      this.show(notification)
    },
    info (notification) {
      this.mode = 'info'
      this.show(notification)
    },
    success (notification) {
      this.mode = 'success'
      this.show(notification)
    },
    error (notification) {
      this.mode = 'error'
      this.show(notification)
    },
    warn (notification) {
      this.mode = 'warn'
      this.show(notification)
    },
    onHideNotification (index) {
      this.hideIndex.push(index)
      this.$emit('close')
    }
  }
}
script>
<style lang="less" scoped>
// 渐变过渡效果
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
// 滑动渐变过渡效果
.slide-fade-enter-active, .slide-fade-leave-active {
  transition: all .3s ease;
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(408px);
  -ms-transform: translateX(408px); /* IE 9 */
  -webkit-transform: translateX(408px); /* Safari and Chrome */
  opacity: 0;
}
.topRight {
  margin-right: 24px;
  right: 0;
}
.topLeft {
  margin-left: 24px;
  left: 0;
}
.bottomRight {
  margin-right: 24px;
  right: 0;
}
.bottomLeft {
  margin-left: 24px;
  left: 0;
}
.m-notification-wrap {
  position: fixed;
  z-index: 999; // 突出显示该层级
  width: 384px;
  color: rgba(0,0,0,.65);
  font-size: 14px;
  .m-notification {
    margin-bottom: 16px;
    padding: 16px 24px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 15%);
    line-height: 1.5;
    background: #fff;
    transition: all .3s;
    position: relative;
    .u-status-svg {
      width: 24px;
      height: 24px;
      display: inline-block;
      position: absolute;
      margin-left: 4px;
    }
    .u-title {
      padding-right: 24px;
      display: inline-block;
      margin-bottom: 8px;
      color: rgba(0,0,0,.85);
      font-size: 16px;
      line-height: 24px;
    }
    .u-description {
      font-size: 14px;
    }
    .mb4 {
      margin-bottom: 4px;
    }
    .ml48 {
      margin-left: 48px;
    }
    .u-close {
      display: inline-block;
      position: absolute;
      top: 21px;
      right: 24px;
      width: 14px;
      height: 14px;
      fill: rgba(0,0,0,.45);
      cursor: pointer;
      transition: fill .3s ease;
      &:hover {
        fill: rgba(0,0,0,.75);
      }
    }
  }
}
style>

②在要使用的页面引入：

<Notification
      ref="notification"
      placement="topRight"
      :duration="null"
      :top="30"
      @close="onClose" />
import Notification from '@/components/Notification'
components: {
    Notification
}
onShowNotification () {
      const notification = {
        title: 'Notification Title',
        description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.'
      }
      this.$refs.notification.open(notification) // 默认使用
      // this.$refs.notification.info(notification) // info调用
      // this.$refs.notification.success(notification) // success调用
      // this.$refs.notification.error(notification) // error调用
      // this.$refs.notification.warn(notification) // warning调用
},
onClose () { // 点击默认关闭按钮时触发的回调函数
      console.log('关闭notification')
}