Element 通知组件 Notification 支持同类型的提示信息只弹出一次!!!

简介: Element 使用闭坑指南• ElementUI 为 DatePicker 日期选择器组件添加前缀说明文字• 生成以周统计的表头,跨月份的周算在后一个月• Element Table 可以实现哪些常见的有用的功能• Element UI Loading 加载组件动态变更 text 值(加载文案)

Element 使用闭坑指南


当我们在使用 Element Notification 通知组件的时候,由于该组件不是通过实例化来创建的,当有事件触发通知时我们就无法控制在同一个页面相同的消息只弹出一次,我们必须使用其它的手段来实现。能否通过一个标识来记录当前页面已经触发通知,我们根据这个标识来判断是否再次弹出相同的提示信息。

2YJD%7N[3@WYCU~2@}D8~47.png


首先我们通过插件的方法,对 Notification 组件做个简单的封装,将判断逻辑整合进去。

import { Notification } from 'element-ui'
const $notify = options => {
  return Notification({
    ...options,
    duration: 0
  })
}
['success', 'warning', 'info', 'error'].forEach(type => {
  $notify[type] = options => {
    if (typeof options === 'string') {
      options = {
        message: options,
        type: type,
        title: '提示',
        duration: 0
      }
    } else {
      options = Object.assign({
        title: '提示',
        type: type,
        duration: 0
      }, options)
    }
    return Notification(options)
  }
})
Notification.install = function (Vue) {
  Vue.prototype.$notify = $notify
  Vue.prototype.$notify.close = Notification.close
}
export default Notification


封装好的插件我们使用在 main 里面导入并使用

import Notify from '@/plugins/notify'
// ...
Vue.use(Notify)


调用 this.notify() 参数可以直接是提示内容的字符串,也可以是配置对象

我们在 util 里封装三个工具函数,来分别从浏览器本地 Storage 缓存处理和判断事件标识

export function setNotifyFlag(eventKey) {
  return Vue.ls.set(eventKey, true, 60 * 60 * 1000)
}
export function removeNotifyFlag(eventKey) {
  return Vue.ls.set(eventKey, false)
}
export function checkNotifyFlag(eventKey) {
  return Vue.ls.get(eventKey)
}


然后在 Notification 事件回调方法里来增加判断,当本地缓存中相关通知事件的标识为空或者为 false 时,触发该通知的时候就调用 setNotifyFlag来在本地缓存中插入标识。在人为关闭通知的时候来移除标识。

if (options.eventKey) {
  options.onClose = () => {
    removeNotifyFlag(options.eventKey)
  }
  if (!checkNotifyFlag(options.eventKey)) {
    setNotifyFlag(options.eventKey)
    return Notification(options)
  }
  return false
} else {
  return Notification(options)
}


这个方案也有个弊端,当用户离开页面,没有手动去关闭通知的话,就无法将缓存中的对应事件的值重置为 false,下次再进来就无法触发这个通知了。所以我们根据情况去设置这个缓存时间。或者下次想到什么更好的方案,再来更新此篇。


目录
相关文章
|
3月前
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
31 1
|
3月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
469 1
|
3月前
【亲测有效】Element UI 自定义 Notification 通知样式不生效,设置this.$notify样式不生效问题
【亲测有效】Element UI 自定义 Notification 通知样式不生效,设置this.$notify样式不生效问题
81 0
输入框禁用状态 可清空输入框如何实现?组件写的
输入框禁用状态 可清空输入框如何实现?组件写的
|
12月前
|
JavaScript
Element-Ui表单移除校验clearValidate和resetFields
添加和修改公用一个弹窗,点击添加弹窗后,如果没移除表单校验的话,再点击修改弹窗时校验就会被记住,所以需要移除校验,但在清空表单校验时会报如下错误: 那么,你只需要加上这段话即可 this.$nextTick(()=>{ this.$refs.addArray.resetFields(); }) 再此,我顺便说一下resetFields和clearValidate的区别: this.$refs.form.resetFields(); //移除表单校验并初始化表单,一般用于.
642 0
Element-Ui表单移除校验clearValidate和resetFields
|
11月前
Element UI 重置表单功能
Element UI 重置表单功能
|
Java
绑定监听事件的按钮运行结果错误原因及其解决方案
既然是窗口大小和按钮大小相同,那么一定是设置宽高的代码出现了问题,由于我们要使得代码冗余度降低,所以把按钮对象建在类中,所以在本类中的 this 关键字代表的就是JFrame窗体的大小,而不是按钮的大小
127 0
绑定监听事件的按钮运行结果错误原因及其解决方案
|
JavaScript
element-ui中下拉command传递多参数事件封装
element-ui中下拉command传递多参数事件封装
520 0
element-ui中下拉command传递多参数事件封装
|
JavaScript
element ui 自定义主题失败(primordials is not defined)
最近在使用Element ui 自定义主题时,遇到了问题,就是一直提示primordials is not defined。简言之,就是node版本的问题。所以需要降低node版本。